Урок 45. Ошибки: БЭМ: block__element--modifier

📁 Раздел: Организация CSS ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#main

⚡ Кратко

БЭМ помогает называть CSS-классы так, чтобы компонент был переносимым: block — самостоятельная сущность, element — часть блока, modifier — вариант состояния или вида. Формат: block__element--modifier.

Частые ошибки

  • Контекст важнее компонента. Селектор зависит от места на странице и ломается при переносе.
  • Слишком много вложенности. Чем длиннее селектор, тем сложнее переопределение.
  • Декор в HTML. Визуальные маркеры лучше держать в CSS, если они не несут смысла.
  • Нет правил команды. Без порядка свойств и naming-соглашения CSS быстро становится непредсказуемым.

Ошибка 1: элемент элемента

БЭМ плоский — элемент именуется относительно блока, а не другого элемента. Цепочки block__el1__el2 не нужны.

<!-- ❌ цепочка элементов -->
<div class="card__body">
  <h2 class="card__body__title">Заголовок</h2>
</div>
<!-- ✅ элемент относительно блока -->
<div class="card__body">
  <h2 class="card__title">Заголовок</h2>
</div>

Ошибка 2: модификатор без базового класса

Модификатор дополняет блок, а не заменяет его. Если оставить только --featured, пропадут все базовые стили карточки.

только модификатор

Без базовых отступов и сетки

базовый + модификатор

Полноценная карточка
<!-- ❌ --> <article class="course-card--featured">…</article>

<!-- ✅ --> <article class="course-card course-card--featured">…</article>

Навигация