БЭМ

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

Метод был разработан инженерами компании «Яндекс». Его ключевая задача — устранить хаотичность в стилях и логике интерфейса. В отличие от простых соглашений по оформлению таблиц стилей, БЭМ применяется не только к каскадным таблицам стилей (CSS — каскадные таблицы стилей), но и к сценариям на языке JavaScript (язык программирования для работы с поведением страницы).

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

Зачем применяется БЭМ

Использование БЭМ позволяет стандартизировать разработку и устранить типовые ошибки при работе с интерфейсами.

Основные преимущества:

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

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

Принцип именования

Именование в БЭМ строится по строгой схеме. Название класса отражает его принадлежность и роль.

Структура:

• блок — независимая сущность.
• элемент — часть блока.
• модификатор — характеристика состояния или внешнего вида.

Пример:

• блок: menu.
• элемент: menu__item.
• модификатор: menu__item_active.

Такая запись делает структуру понятной без анализа кода.

Блок

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

Примеры блоков:

• навигационное меню.
• форма авторизации.
• карточка товара.
• шапка сайта.

Особенности блока:

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

Блок можно перемещать внутри проекта без изменения логики. Это позволяет строить интерфейс как набор независимых модулей.

Элемент

Элемент — составная часть блока. Он не существует отдельно от него.

Основные характеристики:

• принадлежит только одному блоку.
• используется только внутри блока.
• отражает функциональную часть компонента.

Примеры:

• пункт меню.
• кнопка внутри формы.
• изображение в карточке товара.

Именование элемента:

• формат: блок__элемент.
• двойное подчеркивание отделяет элемент от блока.

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

Модификатор

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

Он применяется, когда нужно изменить:

• цвет.
• размер.
• поведение.
• состояние (активен, отключен и т.д.).

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

• булевые — фиксируют наличие состояния.
• со значением — задают конкретный вариант.

Примеры:

• button_disabled — кнопка недоступна.
• card_theme_dark — темная тема оформления.

Правила:

• модификатор не используется отдельно от блока или элемента.
• имя отделяется одним подчеркиванием.
• один модификатор не должен противоречить другому.

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

Изоляция компонентов

Главная идея БЭМ — изоляция. Каждый блок работает независимо.

Это достигается за счет:

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

Преимущества изоляции:

• изменения в одном блоке не влияют на другие.
• упрощается поиск ошибок.
• повышается предсказуемость интерфейса.

Миксы

Микс — это объединение нескольких сущностей на одном элементе.

Он используется для:

• повторного применения стилей.
• комбинирования поведения.
• создания новых компонентов без дублирования кода.

Пример:

• элемент может одновременно быть частью меню и боковой панели.
• при этом он получает стили и поведение от двух блоков.

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

Организация файлов

Методология предполагает разделение проекта на независимые части.

Структура:

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

Преимущества такого подхода:

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

Дополнительно в директории блока могут храниться:

• изображения.
• шрифты.
• вспомогательные файлы.

Особенности применения

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

Рекомендации:

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

Недостатки:

• длинные имена классов.
• увеличение объема кода.
• необходимость строгого соблюдения правил.

Для компенсации используются:

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

Сравнение с другими подходами

Существуют альтернативные методологии организации стилей:

• объектно-ориентированные таблицы стилей (OOCSS — подход, основанный на разделении структуры и оформления).
• модульная архитектура таблиц стилей (SMACSS — система категоризации стилей).
• систематизированные стили (Systematic CSS — структурированный подход к оформлению).

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

Применение в разработке

Методология используется в:

• разработке пользовательских интерфейсов.
• создании веб-приложений.
• командной работе над крупными проектами.

Она особенно эффективна при:

• большом количестве компонентов.
• частом переиспользовании кода.
• необходимости масштабирования.

БЭМ формирует единый язык внутри команды. Это снижает количество ошибок и ускоряет разработку.

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