Препроцессоры CSS впервые предложили концепцию вложенности. Правила можно вкладывать в другие правила, а при сборке они объединяются в одно. Особенно хорошо это работает в сочетании с методологией БЭМ, чтобы избежать дублирования.
Вложенность настолько понравилась разработчикам, что её просили внедрить в CSS. Два года назад это произошло. Теперь во всех современных браузерах есть стандартная вложенность, которая скоро получит статус Widely Available.
Раньше я активно использовал препроцессоры и вложенность. Теперь я предпочитаю стандартный CSS без препроцессоров и плоские селекторы без вложенности. Это вкусовщина, но есть некоторые аргументы.
Усложняется поиск и отладка. Поиск по селектору
.card__heading из DevTools не даст результатов, потому что в коде он будет записан как &__heading, вложенный в .card. Поиск по &__heading может дать много совпадений в разных блоках.Стандартная вложенность отображается в DevTools особым образом, не очень удобным для копирования селектора с целью дальнейшего поиска. Зато она работает как есть, не требует компиляции и карт исходного кода (sourcemaps).
Ухудшается читаемость. При глубокой вложенности код уходит вправо. Ситуация аналогична многоуровневой вложенности блоков кода (
if, for) или вложенным callback-функциям, что приводит к так называемому callback hell.Теряется контекст. При большом количестве вложенных блоков код не помещается на экране, поэтому легко потерять контекст блока верхнего уровня. В современных IDE это не так актуально благодаря sticky-строкам.
Недостаточная поддержка. Стандартная вложенность скоро получит статус Widely Available. Но это всё ещё новая возможность, не все версии браузеров это поддерживают. Поэтому код нужно предварительно обработать.
Необходимость инструментов. Вытекает из предыдущего пункта. Для обработки кода понадобятся инструменты сборки. По возможности я придерживаюсь подхода с минимизацией цепочки инструментов и уменьшения этапов обработки.
Тем не менее, вложенность удобна для медиа-запросов, директив
@starting-style, @counter-style и @property, псевдо-классов и псевдо-элементов. Вложенность также полезна для объединения и группировки стилей.#css