BEM: именование блока, элемента и модификатора
Применяйте методологию «Блок—Элемент—Модификатор», чтобы создавать предсказуемые и повторно используемые имена классов.
«BEM: именование блока, элемента и модификатора» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое BEM?
BEM (Блок — Элемент — Модификатор) — это соглашение об именовании, которое создаёт понятные по смыслу имена классов. Оно делает компоненты CSS предсказуемыми и самодокументируемыми.
Блок
Блок — это самостоятельный, осмысленный компонент пользовательского интерфейса, который может существовать независимо. Это корневой класс компонента.
<div class="card">Card block</div>
<nav class="nav">Nav block</nav>
<button class="button">Button block</button>
<form class="search-form">Search form block</form>Элемент
Элемент — это дочерняя часть блока, не имеющая смысла за его пределами. Для элементов используется двойное подчёркивание: .block__element.
<div class="card">
<div class="card__image">Image</div>
<div class="card__body">
<h2 class="card__title">Title</h2>
</div>
</div>
<nav class="nav">
<div class="nav__item"><a class="nav__link" href="#">Link</a></div>
</nav>Модификатор
Модификатор — это вариант или состояние блока либо элемента. Для модификаторов используется двойной дефис: .block--modifier.
<button class="button button--primary">Primary</button>
<button class="button button--large">Large</button>
<div class="card card--featured">Featured Card</div>
<nav class="nav">
<div class="nav__item nav__item--active">Active Item</div>
</nav>Полный пример BEM
Компонент карточки с именованием по BEM:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button button--primary card__action" href="#">Read More</a>
</div>
</div>Структура CSS по BEM
Соответствующий CSS для карточки по BEM:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button card__action" href="#">Read More</a>
</div>
</div>Преимущество BEM в специфичности
Все классы BEM являются одиночными классами (специфичность 0,1,0). Ни один селектор не обладает большей специфичностью, чем другой, поэтому переопределение выполняется просто — достаточно добавить правильный класс-модификатор.
Распространённые ошибки в BEM
Избегайте следующих ошибок BEM:
- Многоуровневые элементы:
.card__body__title— упростите до.card__title - Элементы за пределами своего блока в HTML
- Использование селекторов элементов, например
.nav__link a, что добавляет ненужную специфичность
BEM и пользовательские свойства CSS
BEM естественно сочетается с переменными CSS. Определяйте токены на уровне блока, чтобы модификаторы могли их переопределять:
<button class="button">Default</button>
<button class="button button--danger">Danger</button>Когда не следует использовать BEM
BEM многословен и не подходит для утилитарных классов или разовых стилей. Утилитарные фреймворки вроде Тейлвинда полностью заменяют BEM. Используйте BEM для пользовательских библиотек компонентов, где важно семантическое именование.
BEM на практике
Многие дизайн-системы используют варианты BEM или похожие схемы именования. Конкретный синтаксис менее важен, чем единый принцип: блок → элемент → модификатор, без глубокой вложенности и с плоской специфичностью.
Быстрая проверка
Какой синтаксис в BEM обозначает элемент с именем «title» внутри блока «card»?
Итоги
BEM использует именование по принципу «Блок, Элемент, Модификатор»: .block__element--modifier. Все классы являются одиночными, поэтому их специфичность плоская и одинаковая. Элементы (__) принадлежат своему блоку. Модификаторы (--) создают варианты. Избегайте глубокой вложенности вроде .card__body__title — упростите её до .card__title.
Часто задаваемые вопросы
Урок «BEM: именование блока, элемента и модификатора» бесплатный?
Да — полный текст урока «BEM: именование блока, элемента и модификатора» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «BEM: именование блока, элемента и модификатора»?
Применяйте методологию «Блок—Элемент—Модификатор», чтобы создавать предсказуемые и повторно используемые имена классов. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «BEM: именование блока, элемента и модификатора»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Почему архитектура CSS важна
- BEM: именование блока, элемента и модификатора
- Организация файлов: ITCSS и шаблон 7-1
- Как избежать войн специфичности