Как правильно добавлять CSS классы БЭМ-блокам и элементами, связанные с темизацией?
Кнопка с иконкой, релизованная в соответствии с БЭМ (только не со стандартной схемой именования):
<button class="RegularButton">
<svg class="RegularButton-Icon" viewBox="0 0 24 24">
<path d="M11,7A2,2 0 0,0 9,9V11A2,2 0 0,0 11,13H13V15H9V17H13A2,2 0 0,0 15,15V13A2,2 0 0,0 13,11H11V9H15V7H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />
</svg>
<span class="RegularButton-Lettering">Восстановить справедливость</span>
</button>
Теперь допустим, её надо темизовать. Насколько я знаю, использовать селекторы типа ".Block > .Element" или ".Block .Element" в БЭМ не допускается. С соблюдением этого условия, решение будет:
<button class="RegularButton RegularButton__LightTheme">
<svg class="RegularButton-Icon RegularButton-Icon__LightTheme" viewBox="0 0 24 24">
<path d="M11,7A2,2 0 0,0 9,9V11A2,2 0 0,0 11,13H13V15H9V17H13A2,2 0 0,0 15,15V13A2,2 0 0,0 13,11H11V9H15V7H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />
</svg>
<span class="RegularButton-Lettering RegularButton-Lettering__LightTheme">Восстановить справедливость</span>
</button>
Правильно ли с точки методологии БЭМ это решение?
Ответы (1 шт):
Использование вложенных селекторов допускается, но с соблюдением меры:
Вложенность уместна, если необходимо изменить стили элементов в зависимости от модификатора (например, состояния блока или заданной темы)
Таким образом, RegularButton-Icon__LightTheme и RegularButton-Lettering__LightTheme можно убрать:
<button class="RegularButton RegularButton__LightTheme">
<svg class="RegularButton-Icon" viewBox="0 0 24 24">
<path d="M11,7A2,2 0 0,0 9,9V11A2,2 0 0,0 11,13H13V15H9V17H13A2,2 0 0,0 15,15V13A2,2 0 0,0 13,11H11V9H15V7H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />
</svg>
<span class="RegularButton-Lettering">Восстановить справедливость</span>
</button>
Комбинированные же селекторы имеют статус "не рекомендуется":
Методология БЭМ не рекомендует использовать комбинированные селекторы. Комбинированные селекторы (например, .button.button_theme_islands) имеют более высокую специфичность, чем одиночные селекторы, что усложняет задачу их переопределения.