Для чего используются модификаторы в БЭМ и как они описываются в классах

Что проверяют

Понимаете ли вы, зачем нужна методология именования, и различаете ли элемент и модификатор. Заодно смотрят, знаете ли вы про запрет на каскад.

Как отвечать

Модификатор описывает состояние или вариант блока либо элемента: размер, тему, активность, отключённость. Он не заменяет базовый класс, а добавляется к нему, поэтому в разметке всегда два класса.

Запись бывает в двух распространённых стилях, и стоит назвать оба:

• классический БЭМ от Яндекса: block__element_modifier_value, то есть одно подчёркивание перед модификатором;
• вариант с двумя дефисами, популярный за пределами: block__element--modifier.

Главное не какой из них, а единый выбор в рамках проекта.

<button class="button button--primary button--disabled">Отправить</button>

.button { ... }
.button--primary { background: var(--mark); }

Зачем это нужно: классы становятся плоскими и независимыми от вложенности, поэтому не нужен каскад вида .sidebar .button span, специфичность у всех правил одинаковая, и компонент можно перенести в другое место разметки, не сломав стили. Это же делает стили предсказуемыми при работе нескольких человек.

Полезно добавить современный контекст: с CSS-модулями и утилитарными фреймворками БЭМ используют реже, но идея разделения «блок, его часть, его состояние» осталась в них же, только имена генерируются автоматически.

Где спотыкаются

Пишут модификатор вместо блока (class="button--primary" без базового класса) и теряют базовые стили.

Городят элементы второго уровня (block__el1__el2), хотя БЭМ этого не предполагает: вложенность в имени не отражается.

Возвращают каскад ради «удобства» и получают войну специфичностей, ради избавления от которой методология и придумана.