BEM: что это и как сделать верстку проще и эффективнее

BEM-методология: что это и как использовать её для эффективной верстки

5 августа 2025 г.

Что такое BEM

BEM (Block, Element, Modifier) — это методология в веб-разработке, предназначенная для создания структурированной и многократно используемой вёрстки. Она позволяет разработчикам создавать независимые компоненты интерфейса с помощью системы именования, которая упрощает поддержку, расширение и масштабирование кода.

Блок — это самостоятельная часть, которую можно использовать в разных местах страницы.

Элемент — это часть блока, которая не может существовать отдельно от него и зависит от его контекста.

Модификатор — это свойство блока или элемента, которое изменяет их внешний вид или поведение.

Вот пример HTML-кода и CSS-стилей, использующих BEM-нейминг:

<div class="menu">
<div class="menu__item menu__item--active">Главная</div>
<div class="menu__item">Новости</div>
<div class="menu__item">Контакты</div>
</div>

HTML

.menu {
display: flex;
}

.menu__item {
margin-right: 10px;
}

.menu__item--active {
font-weight: bold;
}

CSS

В данном случае menu — это блок, menu__item — элемент, а menu__item--active — модификатор.

Зачем он нужен

BEM используют веб-разработчики и дизайнеры для создания и поддержки структурированных и легко расширяемых веб-приложений и корпоративных сайтов.

Лучше всего применять BEM с самого начала проекта или при рефакторинге уже существующего кода. Это позволяет обеспечить повторное использование компонентов и их модификацию, что особенно полезно для крупных проектов с адаптивными интерфейсами.

BEM основан на чётком разделении стилей для блоков, элементов и модификаторов. Такой подход делает код предсказуемым и легко поддерживаемым.

Зачем он нужен:

Организация кода:

BEM помогает структурировать HTML и CSS, что делает код более читаемым, предсказуемым и легким в поддержке.
Четкая система нейминга позволяет легко идентифицировать и управлять различными частями интерфейса, минимизируя ошибки и упрощая модификации.

Уменьшение конфликта стилей:

Избегает пересечения стилей благодаря уникальным именам блоков, элементов и модификаторов.
Повышает предсказуемость и стабильность интерфейса.

Переиспользуемость компонентов:

Компоненты, созданные с использованием BEM, можно легко переиспользовать в различных частях приложения или проекта.
Повышает эффективность разработки за счет модульности.

Гибкость и масштабируемость:

Подходит как для небольших проектов, так и для крупных приложений с сложной структурой.
Облегчает добавление новых компонентов и стилей.

Плюсы и минусы

Плюсы BEM	Минусы BEM
Код становится более читаемым и структурированным, что облегчает его поддержку и развитие.	Имена классов могут быть длинными и менее удобными для быстрого написания.
Компоненты легко переиспользовать в различных частях проекта, что повышает эффективность разработки.	Для небольших проектов применение BEM может оказаться излишне сложным.
Уникальные имена блоков, элементов и модификаторов предотвращают пересечение стилей.	Больше кода для написания, так как каждая часть интерфейса имеет свой уникальный класс.
С помощью модификаторов можно легко изменять внешний вид и поведение компонентов.	Новичкам может потребоваться время для изучения и освоения методологии BEM.
Подходит для проектов любого размера, облегчая добавление новых компонентов и стилей.	Требуется продуманное планирование структуры классов и компонентов.
Обеспечивает единообразие в коде, что особенно полезно при работе в команде.	Длинные и сложные классы могут затруднить визуальное восприятие кода.

Как работать с BEM: настройка и установка

Для работы с BEM не нужно устанавливать специальное программное обеспечение, поскольку это методология написания кода. Однако, чтобы лучше организовать проект и использовать все преимущества BEM, можно применять определённые инструменты и подходы.

Организация проекта
- Создайте структуру папок проекта:
Создайте основные папки для вашего проекта, такие как css, js, images, components, чтобы организовать код и ресурсы.
- Создайте файлы для компонентов:
В папке components создайте отдельные папки для каждого блока. Например: button, header, footer.

Настройка HTML

Структурируйте HTML согласно BEM:

Начните с создания блоков и элементов в HTML-файлах.

HTML

Настройка CSS
- Создайте CSS файлы для блоков:
В каждой папке блока создайте отдельные CSS файлы. Например: button/button.css, header/header.css.
- Организуйте стили согласно BEM:
Используйте уникальные классы для блоков, элементов и модификаторов:

/* button/button.css */
.button {
background-color: gray;
padding: 10px;
}
.button--primary {
background-color: blue;
}
.button__text {
color: white;
}

CSS

Инструменты автоматизации (необязательно)

Используйте препроцессоры CSS:

Препроцессоры, такие как Sass или LESS, могут значительно упростить работу с BEM, позволяя использовать вложенность, переменные и другие мощные возможности:

/* button/button.scss */
.button {
background-color: gray;
padding: 10px;

&--primary {
background-color: blue;
}

&__text {
color: white;
}
}

CSS

Настройка сборки:

Используйте инструменты сборки, такие как Gulp или Webpack, для автоматической компиляции, объединения и оптимизации ваших CSS файлов.

Документация и поддержка

Документируйте компоненты:

Ведите документацию для каждого блока, описывая его структуру и назначение классов.

Следите за консистентностью:

При добавлении новых компонентов или изменении существующих, следуйте BEM-методологии, чтобы поддерживать единообразие и предсказуемость кода.

Пример структуры проекта:

project/
│
├── css/
│ └── main.css
│
├── components/
│ ├── button/
│ │ ├── button.html
│ │ └── button.scss
│ ├── header/
│ │ ├── header.html
│ │ └── header.scss
│ └── footer/
│ ├── footer.html
│ └── footer.scss
│
├── images/
│
├── js/
│ └── main.js
│
└── index.html

CSS

Блоки

Блок — это самостоятельная и независимая часть проекта, которая имеет значение сама по себе и может многократно использоваться в разных частях проекта. Блоки могут содержать элементы и модификаторы, которые изменяют их функциональность и внешний вид.

<div class="menu">
<div class="menu__item">Главная</div>
<div class="menu__item">Новости</div>
<div class="menu__item">Контакты</div>
</div>

HTML

Особенности блоков

Независимость:

Блоки могут быть использованы автономно, без зависимости от других частей кода.

Переиспользуемость:

Один и тот же блок может быть использован в разных частях проекта, что способствует модульности и уменьшению дублирования кода.

Модульность:

Блоки могут включать в себя элементы (части блока) и модификаторы (варианты блока или его элементов), что делает их гибкими и настраиваемыми.

Элементы

Элемент — это часть блока, которая выполняет конкретную функцию внутри этого блока. Элементы обозначаются двойным подчёркиванием (__) после названия блока.

Пример блока с элементами в HTML:

<div class="card">
<div class="card__header">
<h2 class="card__title">Заголовок карточки</h2>
</div>
<div class="card__body">
<p class="card__text">Текст карточки</p>
</div>
<div class="card__footer">
<button class="card__button">Подробнее</button>
</div>
</div>

card — это блок

card__header, card__title, card__body, card__text, card__footer, card__button — это элементы этого блока.

Особенности элементов

Зависимость от блока:

Элементы не могут существовать самостоятельно, они всегда являются частью блока.

Уникальность именования:

Имя элемента состоит из имени блока и имени элемента, разделённых двойным подчёркиванием (__), что исключает конфликты имен.

Функциональность:

Элементы выполняют конкретные функции внутри блока, помогая структурировать и организовывать внутренние части блока.

Модификаторы

Модификатор — это признак, который изменяет внешний вид, состояние или поведение блока или элемента. Модификаторы обозначаются одним символом подчёркивания (_). Они могут быть двух видов: булевыми или типа «ключ-значение».

Типы модификаторов

Булевые модификаторы:

Используются для указания состояния или присутствия определённого стиля.
Пример: block_modifier.

Ключ-значение модификаторы:

Используются для указания различных вариантов блока или элемента.
Пример: block_modifier_value.

Пример блока с модификаторами в HTML:

<div class="button button_primary button_large">
Нажми меня
</div>
<div class="button button_secondary">
Отмена
</div>

Здесь button — это блок, а button_primary и button_large — модификаторы этого блока, которые изменяют его внешний вид.

Особенности модификаторов

Изменение поведения и стиля:

Модификаторы позволяют изменять внешний вид или поведение блоков и элементов без необходимости создавать новые блоки или элементы.

Комбинирование модификаторов:

Один блок или элемент может иметь несколько модификаторов одновременно, что позволяет создавать различные комбинации стилей и состояний.

Уникальность именования:

Модификаторы добавляются к имени блока или элемента через одинарное подчёркивание (_), что исключает конфликты имен.

Миксы

Микс — это способ объединения классов разных блоков или элементов в одном HTML-элементе для использования их стилей или функциональности.

Микс осуществляется путем добавления нескольких классов напрямую в атрибут class HTML-элемента. Например:

<div class="block1 block2 block3__element">

</div>

Пример использования миксов в HTML:

<div class="card">
<div class="card__header header header_small">
<h2 class="card__title">Заголовок карточки</h2>
</div>
<div class="card__body">
<p class="card__text">Текст карточки</p>
</div>
<div class="card__footer footer">
<button class="card__button button button_primary">Подробнее</button>
</div>
</div>

Особенности миксов

Независимость стилей:

Позволяют комбинировать стили и функциональность блоков и элементов, избегая необходимости в наследовании или дублировании кода.

Читаемость и поддерживаемость:

Делают код более читаемым, сохраняя явную связь между использованными компонентами.

Гибкость и масштабируемость:

Позволяют быстро добавлять и изменять функциональность компонентов, не затрагивая их основную структуру.

Файловая структура

В BEM файловая структура не имеет строгих установленных правил, так как BEM сконцентрирована на именовании классов CSS и организации HTML-разметки. Однако, хорошая практика включает организацию файлов для удобства работы и поддержки проекта.

Рекомендации по файловой структуре

Структура проекта:
- blocks/: Этот каталог может содержать подкаталоги, каждый из которых представляет собой блоки (например, header, footer, menu).
- styles/: Здесь размещаются CSS файлы. Каждый блок может иметь свой собственный CSS файл, который включает стили для соответствующего блока.
- scripts/: JavaScript файлы, связанные с конкретными блоками или элементами, можно разместить здесь.
- images/: Каталог для изображений, используемых в проекте.

Файловая структура блока:

Каждый блок рекомендуется размещать в отдельной папке внутри каталога blocks/. Например:

blocks/
├── header/
│ ├── header.css
│ ├── header.html
│ └── header.js
├── menu/
│ ├── menu.css
│ ├── menu.html
│ └── menu.js
└── footer/
├── footer.css
├── footer.html
└── footer.js

CSS

В данном примере для каждого блока (header, menu, footer) созданы отдельные файлы для стилей (.css), HTML-разметки (.html) и JavaScript (.js), если это необходимо.

Именование файлов:
- Имена файлов обычно соответствуют имени блока или элемента. Например, header.css, menu.html.
Сборка и автоматизация:
- Для управления и сборки проекта могут использоваться инструменты автоматизации, такие как Gulp, Webpack или npm скрипты. Они позволяют объединять и минифицировать CSS и JavaScript файлы, оптимизировать изображения и управлять зависимостями.

HTML (header.html):

<div class="header">
<div class="header__logo">
<img src="logo.png" alt="Логотип">
</div>
<nav class="header__nav">
<ul class="header__menu menu">
<li class="menu__item">Главная</li>
<li class="menu__item">О нас</li>
<li class="menu__item">Контакты</li>
</ul>
</nav>
</div>

CSS (header.css):

.header {
background-color: #333;
color: white;
padding: 10px;
}

.header__logo img {
max-width: 100px;
}

.header__nav {
margin-top: 10px;
}

.header__menu {
list-style: none;
padding: 0;
margin: 0;
}

.menu__item {
display: inline-block;
margin-right: 15px;
}

Хорошо организованная файловая структура помогает поддерживать порядок и чистоту в проекте, делая его более понятным и легко поддерживаемым как для одного разработчика, так и для команды.

Как применять BEM для HTML и CSS

Применение методологии BEM (Block, Element, Modifier) для HTML и CSS помогает структурировать и стандартизировать код, делая его более читаемым, поддерживаемым и масштабируемым.

Принципы BEM

Блок (Block):

Блок представляет собой независимую именованную сущность, которая является фундаментальным строительным блоком в BEM.
Название блока отражает его назначение и контекст использования.
Например, header, menu, button.

Элемент (Element):

Элементы являются частями блоков и не имеют самостоятельного смысла вне контекста блока.
Имена элементов формируются с использованием двойного подчёркивания (__).
Например, header__logo, menu__item, button__text.

Модификатор (Modifier):

Модификаторы изменяют внешний вид, состояние или поведение блоков или элементов.
Имена модификаторов формируются с использованием одинарного подчёркивания (_).
Например, button--primary, menu__item--active.

Пример использования BEM в HTML-разметке:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BEM Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
<div class="logo header__logo">
<img src="logo.png" alt="Логотип">
</div>
<nav class="nav header__nav">
<ul class="menu nav__menu">
<li class="menu__item nav__item">Главная</li>
<li class="menu__item nav__item">О нас</li>
<li class="menu__item nav__item">Контакты</li>
</ul>
</nav>
</div>

<button class="button button--primary">Нажми меня</button>

</body>
</html>

Пример стилей для вышеуказанной HTML-разметки:

.header {
background-color: #333;
color: white;
padding: 10px;
}

.header__logo img {
max-width: 100px;
}

.header__nav {
margin-top: 10px;
}

.menu {
list-style: none;
padding: 0;
margin: 0;
}

.menu__item {
display: inline-block;
margin-right: 15px;
}

.button {
padding: 10px 20px;
border: none;
cursor: pointer;
}

.button--primary {
background-color: blue;
color: white;
}

.nav__item--active {
font-weight: bold;
}

Особенности применения BEM для HTML и CSS

Именование классов:

Классы должны отражать иерархию блоков, элементов и модификаторов.
Избегайте слишком длинных и сложных имен, сохраняя их понятность и ясность.

Компонентный подход:

Каждый блок и элемент должен иметь свои собственные стили, что обеспечивает лучшую изоляцию и поддерживаемость кода.

Модификаторы для вариаций:

Используйте модификаторы для создания различных вариаций блоков и элементов без необходимости повторения кода.

Поддержка и масштабируемость:

BEM упрощает сопровождение проекта и его масштабирование, поскольку делает структуру и стили более прозрачными и предсказуемыми.

Какие перспективы у BEM

Разработанная Яндексом в начале 2000-х гг., BEM (Block, Element, Modifier) получила широкое признание благодаря своей структурированности и удобству в использовании. В настоящее время BEM продолжает оставаться актуальной и востребованной, несмотря на появление других методологий и подходов к организации кода в веб-разработке.

Перспективы BEM

Стандартизация и прозрачность:

BEM способствует стандартизации именования классов в HTML и CSS, что улучшает читаемость и поддерживаемость кода. Это особенно важно для крупных проектов и команд разработчиков.

Масштабируемость проектов:

Благодаря четкому разделению на блоки, элементы и модификаторы, BEM облегчает масштабирование проектов. Разработчики могут легко добавлять новые компоненты и вариации без опасения конфликтов и пересечений стилей.

Совместимость с другими технологиями:

BEM хорошо интегрируется с другими технологиями и фреймворками, такими как React, Angular, Vue.js и другими, что позволяет использовать его принципы в современных SPA-приложениях.

Поддержка сообществом:

Веб-разработчики продолжают активно обмениваться опытом и лучшими практиками по применению BEM. Это поддерживает развитие методологии и способствует её адаптации к различным проектам и требованиям.

Развитие инструментов поддержки:

С появлением различных инструментов и плагинов для автоматизации создания BEM-классов, например, генераторов классов или расширений для редакторов кода, использование BEM становится еще более удобным и эффективным.

Продолжение обучения и документации:

Продолжается разработка и улучшение документации по BEM, что помогает новым и опытным разработчикам быстрее осваивать методологию и использовать её в своих проектах.

Типичные ошибки и как их исправить

Неправильное именование классов:

Проблема: Имена классов не соответствуют принципам BEM, могут быть слишком общими или недостаточно информативными.
Исправление: Придерживайтесь следующих правил:

Используйте понятные имена, отражающие смысл блока или элемента.
Не используйте слишком длинные имена, которые затрудняют чтение и понимание кода.
Избегайте использования аббревиатур, если они не являются широко распространёнными и понятными всем членам команды.

Неправильное использование модификаторов:

Проблема: Модификаторы применяются неправильно или неэффективно.
Исправление:

Используйте модификаторы для изменения внешнего вида, состояния или поведения блока или элемента, но избегайте создания избыточного количества модификаторов.
Не создавайте излишнее количество модификаторов, если они могут быть заменены комбинацией блоков и элементов.

Нарушение иерархии блоков и элементов:

Проблема: Неправильное вложение элементов в блоки или неправильное использование блоков и элементов.
Исправление:

Соблюдайте иерархию блоков и элементов: блок может содержать только элементы, элементы — только внутри блоков.
Избегайте использования блоков в качестве элементов и наоборот.

Дублирование кода и стилей:

Проблема: Дублирование классов или стилей блоков и элементов.
Исправление:

Используйте компонентный подход: каждый блок и элемент должен иметь свой уникальный класс и стили.
Избегайте копирования кода, создавайте повторно используемые компоненты и модули.

Недостаточная документация и обучение:

Проблема: Отсутствие четких руководств и документации для новых участников команды.
Исправление:

Создайте подробную документацию по правилам и стандартам BEM для вашего проекта.
Обучайте новых членов команды методологии BEM и правилам его использования.

Неэффективная организация файлов и структуры проекта:

Проблема: Блоки, элементы и стили расположены хаотично, что затрудняет их поиск и поддержку.
Исправление:

Организуйте файловую структуру проекта согласно принципам BEM.
Размещайте файлы стилей и скриптов для каждого блока и элемента в отдельных папках.

Главное, что нужно знать

Что такое BEM:

BEM — это методология именования классов в HTML и CSS, разработанная Яндексом. Она структурирует код, используя три основных концепта: блоки (block), элементы (element) и модификаторы (modifier). BEM способствует созданию модульного и масштабируемого кода в веб-разработке.

Элементы BEM:

Блок (Block): Независимый компонент, который может содержать другие блоки или элементы. Примеры: header, menu, button.
Элемент (Element): Части блока, которые не имеют смысла вне контекста блока. Имена элементов формируются с использованием двойного подчёркивания (__). Примеры: header__logo, menu__item.
Модификатор (Modifier): Изменения внешнего вида, состояния или поведения блока или элемента. Имена модификаторов формируются с использованием одинарного подчёркивания (_). Примеры: button--primary, menu__item--active.

Преимущества BEM:

Улучшает читаемость и поддерживаемость кода благодаря чёткой структуре и именованию классов.
Способствует созданию модульного кода, который легко переиспользовать и модифицировать.
Повышает эффективность работы в команде, упрощая взаимодействие между разработчиками.

Реализация в проекте:

Каждый блок и элемент должен иметь уникальное имя класса, отражающее его функциональность и контекст использования.
Использование модификаторов позволяет создавать различные вариации блоков и элементов без необходимости дублирования кода.
Важно соблюдать иерархию и правила BEM во всех частях проекта, от HTML-разметки до CSS стилей.