Баннер мобильный (1) Пройти тест

БЭМ

Глоссарий

26 марта 2023

Поделиться

Скопировано

Содержание

    БЭМ — компонентный подход к веб-разработке, в основе которого лежит принцип разделения интерфейса на независимые блоки, а также набор интерфейсных библиотек, фреймворков и вспомогательных инструментов. Расшифровывается как «Блок, Элемент, Модификатор».

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

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

    Зачем нужен БЭМ

    Соблюдение правил методологии ускоряет процесс разработки:

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

    Проиллюстрируем все преимущества БЭМ на примере. Предположим, что вверху страницы есть навигационное меню, в котором используются имена CSS-классов item, item active, link:

    <ul class=»nav»>
    <li class=»item active»><a class=»link»>Главная</a></li>
    <li class=»item»><a class=»link»>Портфолио</a></li>
    <li class=»item»><a class=»link»>Контакты</a></li>
    </ul>

    CSS-стили для элементов могут выглядеть так:

    .item
    {
    margin: 5px 5px;
    color: #fff;
    background-color: #000;
    font-weight: bold;
    }
    .active
    {
    background-color: #666666;
    }

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

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

    Методология верстки БЭМ решает эту проблему:

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

    Для иллюстрации принципов БЭМ вернемся к предыдущему примеру. Класс nav будет обозначать название блока верхнего меню, а имена остальных элементов мы изменим так, чтобы была очевидна их принадлежность к nav:

    • item станет nav__item;
    • link — nav__link;
    • active — nav__item_active.

    Фрагмент HTML-кода, описывающий верхнее меню, теперь выглядит так:

    <ul class=»nav»>
    <li class=»nav__item nav__item_active»><a class=»nav__link»>Главная</a></li>
    <li class=»nav__item»><a class=»nav__link»>Портфолио</a></li>
    <li class=»nav__item»><a class=»nav__link»>Контакты</a></li>
    </ul>

    CSS-стили для элементов меню примут такой вид:

    .nav__item
    {
    margin: 5px 5px;
    color: #fff;
    background-color: #000;
    font-weight: bold;
    }
    .nav__item_active
    {
    background-color: #666666;
    }

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

    • утилита qzip для сжатия кода;
    • автодополнение кода в IDE или редакторе;
    • использование шаблонизаторов и CSS-препроцессоров для автоматического добавления префиксов.

    Основные понятия БЭМ

    Эффективность БЭМ-верстки достигается благодаря разделению кода:

    • на независимые блоки;
    • элементы (дочерние компоненты) блока;
    • модификаторы блоков и элементов.

    Рассмотрим блоки, элементы и модификаторы подробнее.

    Блок

    Блок — логически и функционально независимый компонент страницы: меню, боковая панель, карусель, шапка сайта и так далее. Блок включает в себя шаблоны (Pug, Handlebars) и CSS-стили, скрипты JavaScript, документацию в формате XML или Markdown, другие необходимые для реализации технологии.

    Шапка сайта инкапсулирует навигационное меню, логотип, поиск и авторизацию

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

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

    Методология упрощает многократное использование компонентов

    Элемент

    Элемент — неотделимая составная часть блока. Особенности элементов:

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

    Вкладка принадлежит блоку меню и не может использоваться вне блока

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

    Рекомендации БЭМ-верстки касаются смысла и структуры наименования элементов:

    1. Название элемента должно характеризовать его смысл, роль — item («пункт меню»), link («ссылка»).
    2. Структура имени элемента должна соответствовать схеме имя-блока__имя-элемента имя элемента отделяется двойным подчеркиванием.

    Модификатор

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

    Внешний вид верхнего и нижнего меню заметно отличается.

    Модификаторы делятся на два типа:

    1. Булевые. Применяют, когда факт наличия модификатора важнее, чем его значение. Например, если элемент имеет модификатор disabled («отключен»), значение по умолчанию равно true. Структура имени при использовании булевого модификатора выглядит так: имя-блока__имя-элемента_имя-модификатора.
    2. Ключ-значение. Используют в тех случаях, когда значение модификатора важно. Например, если применяется блок с определенной темой оформления: search-form_theme_forest. Структура наименования модификатора элемента соответствует схеме: имя-блока__имя-элемента_имя-модификатора_значение-модификатора.

    Модификаторы могут изменяться в процессе работы блока в зависимости от запросов из других блоков или как реакция на DOM-события. Например, если пользователь введет неверные данные в форму авторизации и нажмет кнопку «Войти», DOM-событие click («Нажатие») изменит свойство блока с сообщением об ошибке с невидимого на видимое.

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

    • внешний вид блока или элемента;
    • состояние компонента;
    • поведение.

    Традиционно имя модификатора отделяют от имени блока или элемента одним подчеркиванием (_). В качестве альтернативы также используют двойной дефис (—).

    Миксы

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

    • задавать одинаковое форматирование для различных элементов дизайна;
    • создавать новые компоненты интерфейса на основе имеющихся;
    • совмещать поведение и стили нескольких компонентов.

    Пример БЭМ-микса — смешивание свойств ссылок на боковой панели sidebar и элемента item из блока основного меню main-menu:

    <nav class=»main-menu»>
    <a class=» sidebar main-menu __item» href=»»></a>
    <a class=» sidebar main-menu __item» href=»»></a>
    <a class=» sidebar main-menu __item» href=»»></a>
    </nav>

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

    Для организации проектов методология БЭМ предусматривает компонентный подход: все блоки, элементы и модификаторы реализуются в независимых файлах-технологиях — например, footer.css, footer.js. Это позволяет:

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

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

    БЭМ предоставляет фронтенд-разработчикам комплексное решение для создания архитектуры проекта и организации рабочего процесса. Однако БЭМ не единственная методология — профессиональные веб-разработчики используют и другие решения для оптимизации CSS и переиспользования компонентов:

    • OOCSS;
    • SMACSS;
    • SUIT CSS;
    • Systematic CSS.

    Каждая из этих концепций обладает набором собственных преимуществ и подходит для реализации определенных проектов. 

    Поделиться

    Скопировано

    0 комментариев

    Комментарии