Что такое BEM?

BEM (Block, Element, Modifier) — это методология именования CSS-классов, которая делает стили модульными, предсказуемыми и не конфликтующими за счёт единой схемы имён.

Три сущности

• Block — самостоятельный компонент: .card, .menu, .button.
• Element — часть блока, отделяется __: .card__title, .menu__item.
• Modifier — вариант/состояние, отделяется --: .button--primary, .card--active.

<div class="card card--featured">
  <h2 class="card__title">Заголовок</h2>
  <button class="card__button card__button--disabled">ОК</button>
</div>

.card {}
.card--featured {}
.card__title {}
.card__button--disabled {}

Зачем нужен

• Изоляция — уникальные имена не конфликтуют без инструментов сборки.
• Плоская специфичность — только классы, без вложенности и !important.
• Читаемость — из имени класса понятны блок, элемент и состояние.
• Переиспользование — блоки независимы от контекста.

Минусы

• Длинные имена классов.
• Многословность разметки.

Коротко для собеседования

BEM — методология именования CSS: Block (.card), Element (.card__title, через __), Modifier (.card--active, через --). Даёт изоляцию, плоскую специфичность и читаемость без инструментов сборки. Минус — длинные имена.