Модификаторы БЭМ и нативная вложенность в CSS

После того, как в 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/