Hack Frontend Community

Что такое методология БЭМ (BEM - Block Element Modifier)

BEM (Block — Element — Modifier) — это методология именования CSS-классов, созданная для организации, переиспользования и масштабируемости HTML и CSS кода.

Она помогает избежать конфликтов в стилях, сделать код понятным, предсказуемым и лёгким в сопровождении при работе в команде.

Расшифровка

СоставляющаяОписание
Block

Независимая сущность, смысловой компонент (например, header, button)

Element

Составная часть блока, не имеет смысла вне него (button__icon)

Modifier

Состояние или вариация блока/элемента (button--active, button__icon--small)

Синтаксис BEM

block
block__element
block--modifier
block__element--modifier

Пример использования BEM

<div class="card">
  <h2 class="card__title">Заголовок</h2>
  <p class="card__description">Описание карточки</p>
  <button class="card__button card__button--primary">Кнопка</button>
</div>

.card {
  padding: 1rem;
  border: 1px solid #ccc;
}

.card__title {
  font-size: 1.25rem;
}

.card__button {
  padding: 0.5rem 1rem;
}

.card__button--primary {
  background-color: blue;
  color: white;
}

Преимущества BEM

1

Предсказуемость и читаемость

Сразу понятно, где находится элемент, и к какому блоку он относится.

2

Отсутствие конфликтов в стилях

Нет глобальных зависимостей. Классы не пересекаются случайно.

3

Удобство масштабирования

Большой проект легче поддерживать, особенно в команде.

4

Простота переиспользования компонентов

Можно выносить блоки в библиотеки или компоненты без дополнительных зависимостей.

Недостатки BEM

  • Классы могут быть длинными и громоздкими
  • Требует дисциплины и единых правил в команде
  • Иногда сложнее читать, особенно при глубокой вложенности

Когда использовать BEM?

  • В больших проектах с командной разработкой
  • При использовании чистого CSS или SCSS
  • Когда нужно минимизировать каскадность и конфликты в стилях

Совет:

Используйте BEM как часть дизайн-системы или архитектуры стилей. Это не только про имена классов, но и про структурный подход к стилям.