PrepBro
← Назад к вопросам

Для чего нужен БЭМ в CSS?

1.7 Middle🔥 191 комментариев
#HTML и CSS#Оптимизация и производительность

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

БЭМ (Block Element Modifier) в CSS

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

Проблема, которую решает БЭМ

Чем больше проект, тем больше CSS кода, и без системы именования возникают проблемы:

  • Конфликты имён — два разработчика могут создать класс с одинаковым названием, который конфликтует
  • Непредсказуемые побочные эффекты — изменение стиля одного класса ломает другие элементы
  • Сложность поддержки — сложно понять, на какие элементы влияет изменение CSS
  • Нечитаемость — через месяц после написания код сложно вспомнить, для чего был написан класс

Структура БЭМ

Block (блок) — независимый, переиспользуемый компонент. Верхнеуровневая сущность:

.card { }
.button { }
.menu { }

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

.card__header { }
.card__content { }
.button__icon { }
.menu__item { }

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

.button--primary { }
.button--disabled { }
.card--highlighted { }
.menu__item--active { }

Практический пример

<div class="card card--featured">
  <div class="card__header">
    <h2 class="card__title">Заголовок</h2>
  </div>
  <div class="card__content">
    <p>Содержимое карточки</p>
  </div>
  <button class="button button--primary button--large">
    Нажми меня
  </button>
</div>

.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background-color: white;
}

.card--featured {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

.card__header {
  margin-bottom: 16px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 12px;
}

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

.card__content {
  margin-bottom: 16px;
  line-height: 1.6;
}

.button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #e0e0e0;
  color: #333;
}

.button--primary {
  background-color: #3b82f6;
  color: white;
}

.button--large {
  padding: 12px 24px;
  font-size: 16px;
}

Почему БЭМ полезен

Предсказуемость — когда я вижу класс .card__title--active, я сразу понимаю структуру: это модификатор для title внутри card.

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

Отладка — при проблеме со стилями я точно знаю, где искать CSS код.

Масштабируемость — новые разработчики быстро адаптируются к проекту, потому что понимают систему.

БЭМ и Tailwind CSS

Модерные фреймворки типа Tailwind CSS частично вытеснили БЭМ, потому что используют инлайн классы:

<div class="rounded-lg border shadow-lg p-4">
  <h2 class="text-2xl font-bold mb-4">Заголовок</h2>
  <p class="mb-4">Содержимое</p>
  <button class="px-4 py-2 bg-blue-500 text-white rounded">Нажми</button>
</div>

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

Вывод

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

Для чего нужен БЭМ в CSS? | PrepBro