Именование: БЭМ и что с ним не так

Код живёт годами и переживает несколько редизайнов. Имена классов переживают их плохо.

Класс .blue-button становится враньём в тот день, когда кнопку просят сделать зелёной. Класс .left-column — когда колонку переносят вправо. .header-2 не был правдой изначально.

Вопрос не в аккуратности. Вопрос в том, что именно называет имя: внешний вид, место на странице или роль.

<div class="red-box big">
  <p class="p14 mt10">Заказ не прошёл</p>
</div>

<div class="alert alert--error">
  <p class="alert__text">Заказ не прошёл</p>
</div>

Блок — самостоятельная штука, которую можно перенести в другое место и она останется собой: card, menu, alert.

Элемент — часть блока, отдельно не имеющая смысла. Пишется через два подчёркивания: card__title.

Модификатор — вариант блока или элемента. Через два дефиса: card--sale, alert--error.

Странные разделители нужны, чтобы отличать границу блока от границы слова: product-card__title--big читается однозначно.

БЭМ придумали для больших проектов с несколькими командами. В маленьких он часто превращается в ритуал.

• Длина. product-card__price-wrapper--discounted — реальное имя из живого проекта. Читать такое тяжело.
• Ложная вложенность. Соблазн писать card__body__title, хотя элемент всегда принадлежит блоку, а не другому элементу. Правильно — card__title, сколько бы уровней разметки между ними ни было.
• Элемент ради элемента. Если внутри блока один заголовок и он всегда выглядит одинаково, можно обойтись .card h3. Это не преступление.
• Модификатор вместо состояния. Об этом ниже — путаница здесь самая частая.

Модификатор — постоянное свойство: эта карточка со скидкой, эта кнопка второстепенная. Задаётся при вёрстке и не меняется.

Состояние — временное: сейчас открыто, сейчас загружается, сейчас ошибка. Меняется во время работы.

Их принято разделять по написанию: модификатор через --, состояние через приставку is- или has-.

1<!-- Вариант задан один раз при вёрстке -->2<button class="btn btn--ghost">Отмена</button>34<!-- Состояние появляется и исчезает во время работы -->5<button class="btn btn--primary is-loading" disabled>6  Сохраняем…7</button>89<!-- Ещё честнее: состояние атрибутом, а не классом -->10<button class="btn btn--primary" data-state="loading" disabled>11  Сохраняем…12</button>

<div class="row">  <button class="btn btn--primary">Купить</button>  <button class="btn btn--ghost">Отмена</button>  <button class="btn btn--primary is-loading" disabled>Сохраняем…</button>  <button class="btn btn--primary" data-state="done">Готово</button></div>

/* Блок: общее для всех кнопок */.btn {  padding: 10px 18px;  font: inherit;  font-weight: 600;  border: 1px solid transparent;  border-radius: 999px;  cursor: pointer;}​/* Модификаторы: постоянные варианты */.btn--primary { color: #fff; background: #6544e0; }.btn--ghost { color: #6544e0; background: transparent; border-color: #cfc6f5; }​/* Состояния: временные */.btn.is-loading { opacity: .6; cursor: progress; }.btn[data-state="done"] { background: #0f8f6a; }​.row { display: flex; gap: 10px; flex-wrap: wrap; }

Самый тяжёлый случай: блок есть, а слова для него нет. Обёртка вокруг двух других блоков, полоска между секциями, контейнер для выравнивания.

Работающие подходы, по порядку предпочтения.

БЭМ решает одну задачу: изоляцию стилей в проекте, где нет сборки. Если сборка есть, задачу решают иначе.

Ни один из них не «лучше». В проекте без сборки, как этот учебник, БЭМ остаётся самым разумным: он не требует ничего, кроме договорённости.

1@layer components {2  /* Блок. Ни слова о том, где он лежит на странице */3  .product {4    display: grid;5    gap: 8px;6    padding: 16px;7    background: var(--color-surface);8    border-radius: 14px;9  }1011  /* Элементы — плоские селекторы, вес 0-1-0 */12  .product__title { margin: 0; font-size: 1rem; }13  .product__price { font-weight: 700; }1415  /* Вариант: задаётся при вёрстке */16  .product--compact { padding: 10px; gap: 4px; }17  .product--compact .product__title { font-size: .9rem; }1819  /* Состояние: приходит и уходит */20  .product[data-state="out-of-stock"] .product__price {21    color: var(--color-muted);22    text-decoration: line-through;23  }2425  /* Раскладка не в компоненте: у карточки нет внешних отступов.26     Расстояния задаёт тот, кто её размещает */27  .catalog { display: grid; gap: 20px; }28}

• БЭМ на лендинге в один экран. Пять блоков, которые никто не будет переиспользовать. Длинные имена тут не окупаются.
• БЭМ поверх фреймворка компонентов. Если стили и так изолированы на уровне сборки, префиксы дублируют то, что уже сделано.
• Элементы для всего подряд. Блок с восемнадцатью элементами — это, скорее всего, три блока, которые слиплись.
• Переименовывать работающий код целиком. Смена схемы именования — большая правка с риском. Вводи новую схему в новом коде, старую трогай только когда всё равно её редактируешь.

<div class="stack">  <div class="red-box red-box--hidden-state">    <p class="red-box__body__text">Заказ не прошёл</p>    <button class="red-box__body__btn">Повторить</button>  </div></div>

.stack { display: grid; }​.red-box {  margin-bottom: 16px;  padding: 14px;  background: #fdecee;  border-left: 3px solid #c8394a;  border-radius: 10px;}​.red-box__body__text { margin: 0 0 10px; color: #c8394a; }​.red-box__body__btn {  padding: 8px 14px;  font: inherit;  color: #fff;  background: #c8394a;  border: 0;  border-radius: 999px;}​.red-box--hidden-state { opacity: .5; }

1<div class="stack">2  <div class="alert is-muted">3    <p class="alert__text">Заказ не прошёл</p>4    <button class="alert__btn">Повторить</button>5  </div>6</div>

1.stack {2  display: grid;3  gap: 16px;4}56.alert {7  padding: 14px;8  background: #fdecee;9  border-left: 3px solid #c8394a;10  border-radius: 10px;11}1213.alert__text { margin: 0 0 10px; color: #c8394a; }1415.alert__btn {16  padding: 8px 14px;17  font: inherit;18  color: #fff;19  background: #c8394a;20  border: 0;21  border-radius: 999px;22}2324.alert.is-muted { opacity: .5; }