Методология BEM: Block, Element, Modifier
Именуйте классы CSS по шаблону Block__Element--Modifier, создавая понятные, слабо специфичные и повторно используемые стили компонентов.
«Методология BEM: Block, Element, Modifier» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое BEM
BEM (блок, элемент, модификатор) — это соглашение об именовании CSS, которое делает стили предсказуемыми, повторно используемыми и свободными от конфликтов. Кодируя структуру компонента в именах классов, оно устраняет борьбу со специфичностью и случайные конфликты стилей.
Блоки — самостоятельные компоненты
Блок — это независимый, повторно используемый компонент: card, button, nav. Имя класса совпадает с именем блока и записывается строчными буквами с дефисами.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Элементы — части блока
Элемент — это часть блока, не имеющая самостоятельного смысла. Используйте два символа подчёркивания: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Модификаторы — варианты и состояния
Модификатор изменяет внешний вид или поведение блока либо элемента. Используйте два дефиса: block--modifier или block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>Правила BEM для CSS
Классы BEM имеют низкую, одинаковую специфичность (по одному классу в каждом). Благодаря этому стили легко переопределять. Никогда не используйте ID или вложенные селекторы элементов — они непредсказуемо повышают специфичность.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM с Sass
Родительский селектор Sass & помогает писать BEM менее многословно. Скомпилированный CSS идентичен обычному BEM.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}Когда создавать новый блок
Создавайте новый блок, когда компонент может существовать самостоятельно и использоваться повторно в разных контекстах. Создавайте элемент, когда часть имеет смысл только внутри одного конкретного блока.
BEM избегает вложенности
BEM не рекомендует глубокую вложенность в HTML и CSS. Элемент внутри другого элемента всё равно называется block__element, а не block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM и JavaScript
Используйте отдельный класс, предназначенный для JavaScript, в качестве хука поведения: префикс js-. Это разделяет стили и скрипты — переименование класса BEM не нарушит работу JavaScript.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);Смешивание блоков BEM
Один элемент может иметь несколько классов блоков, чтобы задавать стили с учётом контекста без связывания блоков между собой.
<button class="btn btn--primary form__submit">Submit</button>Ограничения BEM
Имена классов могут быть длинными. BEM лучше всего подходит большим командам и системам дизайна, где важна единообразность глобальных стилей. Для компонентных фреймворков (React/Vue) с изолированными стилями преимущества пространства имён BEM менее существенны.
Быстрая проверка
Что означает card__title--truncated в BEM?
Повторение: BEM
Блок: самостоятельный компонент. Элемент (два символа подчёркивания __): часть блока. Модификатор (два дефиса --): вариант или состояние. Низкая, одинаковая специфичность. Избегайте селекторов ID и глубокой вложенности. Используйте префикс js- для хуков JavaScript. Символ Sass & делает BEM менее многословным. Отличный выбор для больших команд и систем дизайна.
Часто задаваемые вопросы
Урок «Методология BEM: Block, Element, Modifier» бесплатный?
Да — полный текст урока «Методология BEM: Block, Element, Modifier» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Методология BEM: Block, Element, Modifier»?
Именуйте классы CSS по шаблону Block__Element--Modifier, создавая понятные, слабо специфичные и повторно используемые стили компонентов. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Методология BEM: Block, Element, Modifier»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Методология BEM: Block, Element, Modifier
- CSS Modules: изолированные имена классов
- CSS-in-JS: Styled-components и Emotion
- Tailwind CSS: подход utility-first