БЭМ: модификаторы

Кнопки на сайте бывают основные и второстепенные, большие и маленькие, активные и отключённые. Заводить для каждой новый блок неудобно — это всё та же кнопка. Различия описывают модификаторы: дополнительные классы, которые меняют вид или состояние.

Модификатор блока

Имя модификатора — имя блока, два дефиса -- и название варианта. Его пишут рядом с классом блока, а не вместо него:

<style>
  .button { padding: 8px 16px; border: 1px solid seagreen; border-radius: 6px; background: white; color: seagreen; }
  .button--primary { background: seagreen; color: white; }
</style>
 
<button class="button">Отмена</button>
<button class="button button--primary">Сохранить</button>

Обе кнопки получили базовые стили от .button, а модификатор --primary перекрасил только вторую.

Булевый модификатор

Булевый модификатор либо есть, либо нет — как «да» или «нет». Обычно он описывает состояние: отключено, выбрано, открыто:

<style>
  .tab { display: inline-block; padding: 6px 12px; border-bottom: 2px solid transparent; color: gray; }
  .tab--active { border-bottom-color: royalblue; color: black; }
</style>
 
<span class="tab tab--active">Описание</span>
<span class="tab">Отзывы</span>
<span class="tab">Доставка</span>

Достаточно перенести класс tab--active на другую вкладку — и подсветка переедет вместе с ним.

Модификатор ключ-значение

Когда вариантов несколько, модификатор состоит из двух частей: ключа (что меняем) и значения (на что). Их разделяют дефисом:

<style>
  .button { padding: 8px 16px; border: none; border-radius: 6px; background: seagreen; color: white; }
  .button--size-small { padding: 4px 8px; font-size: 12px; }
  .button--size-large { padding: 12px 24px; font-size: 18px; }
</style>
 
<button class="button button--size-small">Маленькая</button>
<button class="button">Обычная</button>
<button class="button button--size-large">Большая</button>

Ключ size сразу говорит, что эти модификаторы взаимоисключающие: две разные size на одной кнопке не ставят.

Модификатор элемента

Элементы тоже модифицируют — к имени элемента добавляют -- и вариант:

<style>
  .menu__link { margin-right: 12px; color: steelblue; }
  .menu__link--current { color: black; font-weight: bold; text-decoration: none; }
</style>
 
<nav class="menu">
  <a class="menu__link menu__link--current" href="#">Главная</a>
  <a class="menu__link" href="#">Каталог</a>
  <a class="menu__link" href="#">Контакты</a>
</nav>

Варианты синтаксиса

Оригинальный БЭМ от Яндекса записывает модификаторы через одно подчёркивание: button_size_small, button_disabled. Синтаксис с двумя дефисами (button--disabled) распространён шире. Оба варианта одинаково правильны — важно выбрать один на весь проект.

Частая ошибка

Писать модификатор без основного класса:

<style>
  .button { padding: 8px 16px; border: none; border-radius: 6px; background: gray; color: white; }
  .button--primary { background: seagreen; }
</style>
 
<button class="button button--primary">Правильно</button>
<button class="button--primary">Без класса блока</button>

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

Спасибо, что читаете!