Что такое BEM?

BEM (Block Element Modifier)

BEM — это методология именования CSS классов, разработанная командой Яндекса для написания масштабируемого и поддерживаемого кода. Аббревиатура расшифровывается как Block-Element-Modifier, где каждый компонент интерфейса разделяется на три части.

Основные принципы BEM

Block (Блок) — самостоятельный, переиспользуемый компонент, который имеет смысл вне зависимости от контекста. Блок описывает функциональность или назначение элемента:

.card { }
.button { }
.header { }

Element (Элемент) — составная часть блока, которая не имеет самостоятельного смысла и используется в контексте блока. Элемент отделяется двойным подчеркиванием:

.card__header { }
.button__icon { }
.header__logo { }

Modifier (Модификатор) — флаг или состояние блока/элемента, который изменяет его внешний вид или поведение. Модификатор добавляется через двойное дефис:

.button--primary { }
.button--disabled { }
.card__header--dark { }

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

Рассмотрим кнопку с различными состояниями:

<button class="button">Click me</button>
<button class="button button--primary">Primary</button>
<button class="button button--disabled">Disabled</button>

.button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.button--primary {
  background-color: #007bff;
  color: white;
}

.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

1. Масштабируемость — методология позволяет структурировать CSS так, чтобы он легко расширялся при добавлении новых компонентов.
2. Переиспользуемость — блоки создаются как независимые компоненты, которые можно применять в разных местах проекта.
3. Понятность — из названия класса сразу видна его роль и связь с другими элементами.
4. Простота — нет сложных селекторов, что снижает специфичность и предотвращает конфликты стилей.
5. Командная работа — разработчики быстро понимают структуру и легче совместно работают с кодом.

BEM — это не обязательный стандарт, но рекомендуемая практика для поддерживаемого кода в больших проектах.