Что такое методология БЭМ?

БЭМ (Block Element Modifier)

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

Основные компоненты

Блок (Block) — независимый компонент, который может быть использован самостоятельно:

.button {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

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

.button__text {
  font-weight: 600;
}

.card__header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.card__content {
  padding: 16px;
}

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

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

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

.button--large {
  padding: 15px 30px;
  font-size: 18px;
}

.card--featured {
  border: 2px solid #gold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

Синтаксис БЭМ

blockName__elementName--modifierName

Примеры:

• .button — блок
• .button__text — элемент блока button
• .button--primary — модификатор блока button
• .button__text--bold — модификатор элемента

Полный пример

<div class="card card--featured">
  <div class="card__header">
    <h2 class="card__title">Заголовок</h2>
  </div>
  <div class="card__content">
    <p class="card__description">Описание</p>
  </div>
  <div class="card__footer">
    <button class="button button--primary">OK</button>
    <button class="button button--secondary button--disabled">Отмена</button>
  </div>
</div>

.card {
  background: white;
  border-radius: 8px;
}

.card--featured {
  border: 2px solid gold;
}

.card__header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.card__title {
  margin: 0;
  font-size: 20px;
}

.card__content {
  padding: 16px;
}

.card__footer {
  padding: 16px;
  text-align: right;
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

.button--secondary {
  background: white;
  color: #333;
  border: 1px solid #ddd;
}

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

С современным Tailwind CSS

В эпоху Tailwind CSS БЭМ менее актуальна, но принципы остаются:

// Компонент (вместо блока БЭМ)
function Card({ featured, children }: { featured?: boolean; children: React.ReactNode }) {
  return (
    <div className={cn("bg-white rounded-lg", featured && "border-2 border-gold")}>
      {children}
    </div>
  );
}

// Использование
<Card featured>
  <div className="p-4 border-b">Заголовок</div>
  <div className="p-4">Содержимое</div>
</Card>

Преимущества БЭМ

• Читаемость — из имени класса сразу понятна структура
• Модульность — блоки независимы и переиспользуемы
• Масштабируемость — легко расширять код
• Предсказуемость — всегда знаешь, где искать стили
• Командная работа — единые соглашения об именовании
• Отсутствие конфликтов — низкая специфичность селекторов

Недостатки

• Многословность — длинные имена классов
• Чрезмерная детализация — может быть избыточной для простых проектов
• Устаревание — с приходом CSS-in-JS и Tailwind CSS менее актуальна

Современный подход

Сегодня БЭМ часто комбинируют с:

• Tailwind CSS — для базовых стилей
• CSS modules — для изолированных стилей
• Компонентный подход — структура вместо селекторов

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