Что такое BEM

BEM расшифровывается как Block, Element, Modifier. Это не библиотека и не отдельный синтаксис CSS. Это договоренность о том, как называть классы и где проводить границы интерфейса.

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

На интервью не ограничивайтесь расшифровкой. Сразу добавьте практический вывод: BEM помогает писать CSS с низкой специфичностью и понятной связью между разметкой и стилями.

Пример обычной карточки товара:

<article class="product-card product-card--featured">
  <img class="product-card__image" src="/phone.jpg" alt="Смартфон" />
  <h2 class="product-card__title">Смартфон</h2>
  <p class="product-card__price">49 990 ₽</p>
  <button class="button button--primary">Купить</button>
</article>

.product-card {
  padding: 16px;
  border: 1px solid #ddd;
}

.product-card--featured {
  border-color: #4f46e5;
}

.product-card__title {
  margin: 0 0 8px;
}

.button--primary {
  background: #4f46e5;
  color: white;
}

Здесь product-card работает как блок, product-card__title как элемент, а product-card--featured как модификатор. Кнопка сделана отдельным блоком button, потому что ее можно использовать не только внутри карточки.

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

Не делайте элементом все, что визуально вложено внутрь. В HTML компонент может лежать в карточке, но по смыслу оставаться отдельным блоком. На этом часто видно, понимаете ли вы BEM на практике.

BEM подталкивает писать плоские селекторы:

.menu__item {
  padding: 8px 12px;
}

.menu__item--active {
  font-weight: 600;
}

Это лучше, чем завязывать стиль на путь через всю разметку:

/* Плохо: стиль зависит от структуры страницы */
.layout .sidebar ul li a.active {
  font-weight: 600;
}

Во втором варианте изменение контейнера или уровня вложенности может сломать стиль. Такой селектор трудно переопределять без роста специфичности. В BEM класс прямо говорит, что именно стилизуется, и снижает риск случайного влияния соседних блоков.

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

<!-- Плохо: выглядит disabled, но кнопка все еще кликабельна -->
<button class="button button--disabled">Отправить</button>

<!-- Лучше: есть и стиль, и семантика браузера -->
<button class="button button--disabled" disabled>Отправить</button>

Если оставить только класс, пользователь может повторно отправить форму, а скринридер не получит корректный сигнал о состоянии кнопки. В React это особенно важно при отправке формы. Пока идет запрос, храните состояние вроде isSubmitting, передавайте disabled={isSubmitting}, блокируйте повторный submit в обработчике и показывайте loading-состояние. Один класс button--disabled или button--loading только меняет вид и не защищает от лишнего запроса.

На интервью полезно сказать так: модификатор отражает состояние в CSS, но семантика и логика должны быть реализованы отдельно.

Если в проекте уже есть хаотичные классы и глубокие селекторы, не нужно переименовывать все сразу. Начните с компонентов, которые часто меняются или переиспользуются. Там BEM быстрее даст пользу: меньше регрессий, проще ревью, понятнее ответственность классов.

Ваш короткий ответ может звучать так:

BEM помогает именовать CSS-классы через блоки, элементы и модификаторы. Блок самостоятельный. Элемент зависит от блока. Модификатор описывает вариант или состояние. BEM помогает писать плоские селекторы, снижать конфликты в каскаде и делать компоненты проще для поддержки.

Если хотите усилить ответ, добавьте ограничение:

При этом BEM не изолирует CSS сам по себе. Нужно все равно следить за глобальными стилями, порядком подключения и тем, чтобы модификаторы не заменяли семантику HTML или логику приложения.