Урок 45. Примеры: БЭМ: block__element--modifier

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

⚡ Кратко

Смотри на «Результат» рядом с кодом: __ отделяет элемент, -- отделяет модификатор. Модификатор не меняет разметку, только добавляет класс рядом — и блок выглядит иначе.

Рабочие примеры

В каждом примере сверху — живой результат, ниже — код HTML и CSS. Все стили в превью заданы inline, чтобы показать ровно то, что делают БЭМ-классы.

1. Базовый блок и его элементы

Один компонент .course-card с элементами __title, __text, __button.

HTML & CSS

Компонент переносится без контекстных селекторов.

Открыть
📄 lesson-45/index.html
<article class="course-card">
  <h2 class="course-card__title">HTML & CSS</h2>
  <p class="course-card__text">Компонент переносится без контекстных селекторов.</p>
  <a class="course-card__button" href="#">Открыть</a>
</article>
📄 lesson-45/styles.css
.course-card {
  display: grid;
  gap: .75rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: .75rem;
}
.course-card__title  { margin: 0; font-size: 1.5rem; }
.course-card__button { justify-self: start; }

2. Модификатор меняет вид блока

Обычная карточка и та же карточка с .course-card--featured рядом. Разметка та же — добавлен лишь второй класс.

Базовый курс

.course-card

Топ-курс ★

.course-card--featured

📄 lesson-45/index.html
<article class="course-card"> … </article>

<article class="course-card course-card--featured"> … </article>
📄 lesson-45/styles.css
.course-card           { border: 1px solid var(--color-border); }
.course-card--featured { border: 2px solid var(--color-accent);
                         background: #fff7ed; }

3. Модификатор элемента

Две кнопки одного блока: базовая .course-card__button и --primary. Модификатор вешается на элемент, а не на блок.

📄 lesson-45/index.html
<a class="course-card__button" href="#">Подробнее</a>
<a class="course-card__button course-card__button--primary" href="#">Записаться</a>
📄 lesson-45/styles.css
.course-card__button {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}
.course-card__button--primary {
  color: white;
  background: var(--color-accent);
}

4. Несколько модификаторов на состояние

Модификаторы описывают и состояние: --active, --disabled. Все они — отдельные классы рядом с базовым.

📄 lesson-45/index.html
<nav class="menu">
  <span class="menu__item">Все</span>
  <span class="menu__item menu__item--active">Активные</span>
  <span class="menu__item menu__item--disabled">Архив</span>
</nav>
📄 lesson-45/styles.css
.menu__item            { color: var(--color-text); }
.menu__item--active    { background: var(--color-accent); color: #fff; }
.menu__item--disabled  { color: #94a3b8; cursor: not-allowed; }
Эксперимент: открой пример 2 в DevTools (F12), сними класс course-card--featured со второй карточки и смотри, как она становится обычной — базовый класс остаётся на месте.

Навигация