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

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

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

Расшифровка

Синтаксис 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

Недостатки BEM

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

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

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