Что такое БЭМ и зачем используется эта методология?

Что такое БЭМ?

БЭМ (Block, Element, Modifier) — это методология разработки интерфейсов, предложенная компанией Яндекс. Она предлагает строгие правила именования CSS-классов и структурирования кода, чтобы сделать фронтенд-проекты масштабируемыми и легко поддерживаемыми. Основная идея — разбить интерфейс на независимые блоки, которые можно переиспользовать в разных местах.

Основные понятия

• Блок — самостоятельная сущность, например, кнопка, меню или форма. Имя блока — одно слово без подчеркиваний: button, menu.
• Элемент — часть блока, которая не имеет смысла вне него. Имя элемента добавляется через двойное подчеркивание: button__icon, menu__item.
• Модификатор — состояние или вариант блока/элемента. Добавляется через одинарное подчеркивание: button_disabled, menu__item_active.

Пример кода

<div class="card">
  <img class="card__image" src="..." alt="...">
  <h3 class="card__title">Заголовок</h3>
  <p class="card__text">Описание</p>
  <button class="card__button card__button_primary">Купить</button>
</div>

Здесь card — блок, card__image, card__title — элементы, а card__button_primary — модификатор, задающий стиль кнопки.

Зачем это нужно?

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

Вывод

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