Модификаторы БЭМ и нативная вложенность в CSS
После того, как в CSS стало можно вкладывать одни селекторы в другие, как мы это раньше делали в препроцессорах, остался один важный кейс, который довольно быстро принесли фанаты БЭМ.
Вот так в CSS написать нельзя, селекторы — это не строки, которые можно просто склеить.
Но Владислав Зубко нашёл решение.
И ведь по сути да, если у элемента есть заданный класс, то у него сработает и селектор по атрибуту
https://whatislove.dev/articles/bem-modifiers-in-pure-css-nesting/
После того, как в CSS стало можно вкладывать одни селекторы в другие, как мы это раньше делали в препроцессорах, остался один важный кейс, который довольно быстро принесли фанаты БЭМ.
.block {
&__modifier {
color: var(--omg);
}
}
Вот так в CSS написать нельзя, селекторы — это не строки, которые можно просто склеить.
Но Владислав Зубко нашёл решение.
.tag-list__tag {
--background-color: var(--color-red-200);
&[class*='--html'] {
--background-color: var(--color-green-100);
}
}
И ведь по сути да, если у элемента есть заданный класс, то у него сработает и селектор по атрибуту
[class].https://whatislove.dev/articles/bem-modifiers-in-pure-css-nesting/