Урок 45. Домашнее задание: БЭМ: block__element--modifier

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

⚡ Кратко

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

Домашнее задание

Задача: Переименуйте карточку курса по БЭМ: выделите block, element и modifier, замените контекстные селекторы на плоские классы и покажите плохой/хороший пример рядом.
1

Подготовьте пример

Создайте index.html и styles.css с карточкой: контейнер-блок, заголовок-элемент, кнопка-элемент.

2

Назовите по БЭМ

Дайте классы .course-card, .course-card__title, .course-card__button; добавьте модификатор блока --featured и модификатор кнопки --primary.

3

Уберите контекст

Если где-то остался селектор вида .sidebar .card h2 — замените его на плоский .course-card__title.

4

Проверьте переносимость

Перенесите карточку в другой контейнер. Оформление должно сохраниться — компонент не зависит от родителя.

Навигация