Урок 45. Справочник: БЭМ: block__element--modifier

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

⚡ Кратко

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

Справочник урока

Три «кирпича» БЭМ и разделители между ними. Запомни: __ — элемент, -- — модификатор.

ИнструментЗачем нуженМини-пример
blockСамостоятельный компонент.course-card
elementЧасть блока.course-card__title
modifierВариант блока или элемента.course-card--featured
block__element--modifierПолный формат имени.course-card__button--disabled

Разделители

РазделительЧто отделяетПример
__ (два подчёркивания)Блок → элемент.course-card__title
-- (два дефиса)Основу → модификатор.course-card--featured

Хрупко vs устойчиво

❌ Хрупкий селектор✅ БЭМ-класс
.sidebar .card h2.course-card__title
.main .card.featured a.course-card__button--primary

Навигация