Что в БЭМ значит модификатор-темы?

Question

[Norum]

В описании БЭМ столкнулся с тем, что иногда применяется модификатор с именованием темы...а какие свойства обычно содержит этот модификатор?

Например

<form class="form  form_size_m form_color_red_form_theme_forest"></form>

form_size_m задает размер шрифта, form_color_red цвет текса красным, а _form_theme_forest что задает? Это ведь не положение и не цвет

Comments

[Василий Банников]

просто суффикс

[Norum]

Василий Банников, то есть никакие свойства этот модификатор в себе не несет? Если нет, то зачем он нужен?

[Василий Банников]

Norum, например чтобы показать, что тема взята с theme_forest.
Ну и ещё по идее должно защитить от случайных коллизий

[Norum]

Василий Банников, а такое вообще прописывается в реальных проектах?

[Василий Банников]

Norum, ни разу не видел такого.
Ну и темы таки проще задавать через css-переменные

Answer 1

[Realetive]

Это ошибка — такого модификатора быть не может. Скорее всего имелось в виду

<form class="form  form_size_m form_color_red form_theme_forest"></form>

Про размер и цвет шрифта вы правильно сказали, а модификатор темы (в значении forest) задаёт базовые значения темы (цвет шрифта, фона, заливки, border'а и т. д.). Любой компонент может быть представлен в тёмной и светлой теме. И это не симметричная инверсия, так что задание отдельных тем (*_theme_light, *_theme_dark) более чем оправдано. Дополнительные темы полезны, если ваш интерфейс стилизуется, например, под Material, или какой-то иной бренд. Т. е. вы просто группируете оформление (включая отступы, если они меняются при переключении темы) в модификатор темы, а в классе самого блока или элемента описывается остальные базовые свойства — лэйаут, позиционирование и т. д.

P. S. В вашем случае, например, в form_theme_forest могут быть такие свойства:

.form_theme_forest {
  background-color: #fff;
  color: #000;
}

Но вам нужен красный цвет текста, т. е. переопределить color: #000, поэтому вы добавляете класс form_color_red.