#заметка дня

Мне не очень нравится вложенность в SASS/SCSS/LESS и иже с ними.

Не очень нравится и будущее предложение внести вложенность (nesting) в CSS.

И я поясню, почему.

В первой части заметки много кода, телега не справится. Пройдите сюда, пожалуйста: https://gist.github.com/bekharsky/dea79c6b51fb693fba81897a40a594a4

Не так давно я в чате пытался помочь человеку, который накидал & для формирования классов (пытался в БЭМ) и никак не мог понять, как же сделать &:hover.

Получалось что-то вроде:

.block {
  &__element {
   // styles
  }

  &:hover {
    &__element {
      // styles
    }
  }
}

Кто-то на этом месте фыркнет. И будет неправ, потому что SCSS мог бы вместо простой конкатенации строк делать что-то более умное с блоками. Но надо ли?

Более опытные вспомнят про кеширование селекторов. Тоже вариант. Закешируем с десяток, почему нет… попробуй разберись.

В общем, я с некоторых пор использую нестинг только для псевдо- классов и элементов. Ограничиваю область видимости, не пытаясь решить все проблемы на свете.

Нестинг затрудняет понимание кода и поиск. Стили потомка могут оказаться в любом месте стилей родителя. Зачем?

Все мои аргументы касаются только читаемости кода. Ты можешь быть юным гением, который знает любое место в своём проекте. Но зачем вообще тратить ресурсы мозга на это?

#css #scss #nesting

#заметка дня

Мне не очень нравится вложенность в SASS/SCSS/LESS и иже с ними.

Не очень нравится и будущее предложение внести вложенность (nesting) в CSS.

И я поясню, почему.

В первой части заметки много кода, телега не справится. Пройдите сюда, пожалуйста: https://gist.github.com/bekharsky/dea79c6b51fb693fba81897a40a594a4

Не так давно я в чате пытался помочь человеку, который накидал & для формирования классов (пытался в БЭМ) и никак не мог понять, как же сделать &:hover.

Получалось что-то вроде:

.block {
  &__element {
   // styles
  }

  &:hover {
    &__element {
      // styles
    }
  }
}

Кто-то на этом месте фыркнет. И будет неправ, потому что SCSS мог бы вместо простой конкатенации строк делать что-то более умное с блоками. Но надо ли?

Более опытные вспомнят про кеширование селекторов. Тоже вариант. Закешируем с десяток, почему нет… попробуй разберись.

В общем, я с некоторых пор использую нестинг только для псевдо- классов и элементов. Ограничиваю область видимости, не пытаясь решить все проблемы на свете.

Нестинг затрудняет понимание кода и поиск. Стили потомка могут оказаться в любом месте стилей родителя. Зачем?

Все мои аргументы касаются только читаемости кода. Ты можешь быть юным гением, который знает любое место в своём проекте. Но зачем вообще тратить ресурсы мозга на это?

#css #scss #nesting

#опрос дня

Помните, я возмущался тем, что вложенность в CSS это ужасно?

Я не собираюсь менять своего мнения, но тут такое дело...

Короче, nesting собираются ввести в стандарт. Но есть проблема.

Никак не могут выбрать синтаксис!

Так что CSSWG в блоге WebKit решили выкатить опрос на общественное суждение: https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/

Ну что, не каждый день нам предлагают на будущее повлиять.

Изъявите свою волю 🙂

А там посмотрим.

#css #nesting

#фишка дня

Я писал как-то о том, что одной из одновременно полезных и раздражающих вещей в CSS-препроцессорах является возможность создавать вложенность, nesting.

Склеивать селекторы, классы в БЭМ и не только, вкладывать теги... Удобно? Писать — да, поддерживать — не очень. Вот тут: https://yangx.top/htmlshit/1643

К чему это я?

К тому, что Chrome 112 начал поддерживать CSS Nesting! Официальный! Который теперь часть спецификации: https://www.w3.org/TR/css-nesting-1/

.nesting {
color: hotpink;

> .is {
color: rebeccapurple;

> .awesome {
color: deeppink;
}
}
}

Ну и на видео показан процесс отладки этого дела в DevTools.

Статья в блоге разработчиков Chrome: https://developer.chrome.com/articles/css-nesting/, хороший способ вспомнить, что к чему.

Моё мнение остаётся прежним: для псевдоклассов, псевдоэлементов или влияния на соседей (+, ~) — очень хорошо. Для формирования БЭМ (склеивания классов) — нет.

Всем nesting, котаны!

#css #nesting

#новость дня

Давайте я быренько, чтобы никого не задерживать: нативный CSS-нестинг вчера приземлился в Firefox Nightly!

Пруф: https://bugzilla.mozilla.org/show_bug.cgi?id=1835066

Codepen для проверки вашего любимого браузера: https://codepen.io/bramus/full/oNdrypM

Caniuse: https://caniuse.com/?search=css%20nesting

Ну и PostCSS-плагин, который я совсем скоро подключу и избавлюсь от ненавистного мне Dart Sass: https://github.com/postcss/postcss-nested

Остаёмся на связи, котаны!

#css #nesting

#заметка дня

Что-то я оборзел, пять дней без постов. Зато вы не отписываетесь. Устроил себе длинные выходные.

Знаете, чего я ждал? Выхода Firefox 117, чтобы в очередной раз поворчать!

Итак, начиная этой версии Firefox поддерживает нативный CSS nesting aka вложенность. Да-да, как практически любой из препроцессоров. То есть:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    .awesome {
      color: deeppink;
    }
  }

  &.alt {
    color: cyan;
  }
}

Амперсанд (&) здесь ссылка на родителя, которую, очевидно, можно использовать где угодно. Но нельзя кешировать :(

А теперь, внимание, клоунада! 🤡

Firefox 117 поддерживает последнюю версию спецификации, в то время как текущие Chrome и Safari — предыдущую. Что это значит?

То, что клятый амперсанд надо ставить даже в определении вложенных селекторов, а не только в композиции. Но не надо перед селекторами потомков и соседей — это >, + и ~:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    & .awesome {
      color: deeppink;
    }
  }

  &.alt {
    color: cyan;
  }
}

Потому без магии PostCSS опять не обойтись, используйте плагин postcss-nesting. Или оставайтесь на SCSS.

Ну и на закуску, моё мнение о нестинге вообще: https://yangx.top/htmlshit/697 Не то чтоб вы его просили, но я такой.

#css #nesting

#баг дня

Разработчики спецификации:
— Вот вам предложение ввести нативный нестинг в CSS!

Разработчики браузеров:
— Мы сделали вам нативный нестинг в CSS!

Разработчики сайтов:
— Гляди, рендер одного слова занимает пять секунд

Кроме шуток, это действительно интересная проблема. Довольно больно.

Давайте посмотрим на этот пример: https://crisal.io/tmp/lots-of-nesting.html

На моей машине рендерится за 5.4 секунды. MacBook Pro M2 13", Chrome 126.0.6478.63

Safari вылетает и на ноутбуке, и на iPhone.

Firefox показывает кривые данные, но тоже близко к 5 секундам.

Вот ссылка на GitHub issue: https://github.com/w3c/csswg-drafts/issues/2881#issuecomment-1642450622

Проблема нестинга в том, что число комбинаций селектров растёт экспоненциально. И вроде бы понятно, что надо включать мозг, но...

...но делитесь вашими бенчмарками, котаны :)

#css #nesting #bug

#такое дня

Не открывайте этот кодпен, если не хотите повесить ваш Chrome!

https://codepen.io/chasewackerfuss/pen/JKGrJJ

Да-да, не вкладку, а весь браузер. Закрыть-то её можно, но на MacBook на M2 Pro я смог это сделать только через минуту.

Изоляция вкладок, говорили они. Нестинг и анимации не будут влиять на производительность стилей, твердили они... Ха-ха.

У Safari, кстати, всё хорошо. А Firefox сильно тормозит, но не так и не настолько плохо, как Chrome. И весь браузер не вешается.

#codepen #css #nesting #fail