Методология БЭМ — одна из самых популярных на данный момент, в основе которой лежит договоренность того, как разбивать интерфейс на определенные независимые блоки. Расшифровывается аббревиатура как «Блок Элемент Модификатор». Этот подход к web-разработке позволяет быстро создавать сайты с гибкой архитектурой. Он знаком многим, кто занимается HTML/CSS версткой, но, как по мне, не достаточно, чтобы значительно упростить жизнь и работу большинству моих коллег. Изобретённый в Яндексе, БЭМ постепенно проникает и в разработку других компаний.
Зачем нужен БЭМ?
Методология оказалась востребованной, поскольку разработка большого портала должна отвечать следующим принципам:
-
Типовые сайты требуют малых временных затрат для создания;
-
Проект должен существовать длительное время, поддерживаться и быть понятным разным поколениям разработчиков;
-
Нужно уметь легко масштабировать команду: на проекте может работать один человек, а может десять;
-
Внутри команды должны быть чёткие зоны ответственности;
-
Код должен быть таким, чтобы его можно было использовать повторно.
Развитие методологии и её «обкатка» сотнями разработчиков показала, что она подходит не только для больших порталов, но и для web-студий или других моделей разработки. Для применения методологии разрабатываются технические решения, не просто удовлетворяющие БЭМ, а имеющие отдельные преимущества. Это, например, «особенный» JavaScript. И JavaScript-шаблонизатор. И набор инструментов, реализованных на NodeJS.
Гарантированный прогресс
Каковы наши основные ожидания от использования БЭМ? Я бы выделил:
-
Отсутствие коллизий;
-
Отсутствие коллизий;
-
И еще раз отсутствие коллизий.
Методология гарантирует отсутствие коллизий, используя изоляции через пространства имён. Это современная реинкарнация бывшей концепции изолированных модулей. А с SASS вообще целое объектно-ориентированное программирование. Конечно, сначала нужно потратить время для грамотного разбиения на компоненты. Но это того стоит: модульность имеет значительные преимущества, а именно:
-
Читаемый и поддерживаемый код;
-
Переиспользование компонентов;
-
Простота тестирования;
-
Гармония с объектной природой JavaScript.
Правила оформления имен
Имя БЭМ-сущности уникально. Во всех технологиях (CSS, JavaScript, HTML) одна и та же БЭМ-сущность всегда должна быть названа одинаково. Основная идея соглашения по именованию — вложить смысл в имена и сделать их максимально информативными для разработчика.
Можно сравнить одно и тоже имя CSS-селектора, написанное разными способами:
searchitemactive
search-item-active
searchItemActive
Чтобы понять смысл первого имени, нужно вчитаться в каждое слово. В последних двух примерах имя явно разделяется на логические части. Но ни одно из имен пока не помогает точно определить, что search — это блок, item — элемент, а active — модификатор. Чтобы имена сущностей были однозначными и понятными, в БЭМ были разработаны правила формирования имен БЭМ-сущностей.
Правила формирования имен
block-name__elem-name_mod-name_mod-val
Имена записываются латиницей в нижнем регистре.
Для разделения слов в именах используется дефис (-).
Имя блока задает пространство имен для его элементов и модификаторов.
Имя элемента отделяется от имени блока двумя подчеркиваниями (__).
Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).
Значение модификатора отделяется от имени модификатора одним подчеркиванием (_).
Значение булевых модификаторов в имени не указывается.
Важно! В методологии БЭМ не существует элементов элементов. Правила именования запрещают создавать элементы элементов, но в DOM-дереве элементы можно вкладывать друг в друга.
Имя блока
menu
HTML
<div class="menu">...</div>
CSS
.menu { color: red; }
Имя элемента
menu__item
Важно! Имена одинаковых элементов одного и того же блока совпадают. Например, все пункты в блоке меню называются menu__item.
HTML
<div class="menu">
...
<span class="menu__item"></span> </div>
CSS
.menu__item { color: red; }
Имя модификатора блока
menu_hidden menu_theme_islands
HTML
<div class="menu menu_hidden">...</div> <div class="menu menu_theme_islands">...</div>
CSS
.menu_hidden { display: none; }
.menu_theme_islands { color: green; }
Имя модификатора элемента
menu__item_visible menu__item_type_radio
HTML
<div class="menu"> ... <span class="menu__item menu__item_visible menu__item_type_radio">...</span> </div>
CSS
.menu__item_visible {}
.menu__item_type_radio { color: blue; }
Как еще можно именовать
Описанные выше правила формирования имен — это классическая схема именования БЭМ-сущностей. Все инструменты БЭМ по умолчанию настроены на классическую схему.
Существуют альтернативные схемы именования, которые активно используются в БЭМ-сообществе. Чтобы во всех технологиях применять одинаковые имена, созданные по альтернативным схемам, используйте инструмент bem-naming. По умолчанию bem-naming содержит настройки соглашения по именованию, предложенного методологией, но позволяет добавлять правила для применения альтернативных схем.
Стиль Two Dashes (который используя я)
block-name__elem-name--mod-name--mod-val
-
Имена записываются латиницей в нижнем регистре.
-
Для разделения слов в именах БЭМ-сущностей используется дефис (-).
-
Имя элемента отделяется от имени блока двумя подчеркиваниями (__).
-
Булевые модификаторы отделяются от имения блока или элемента двумя дефисами (--).
-
Значение модификатора отделяется от его имени двумя дефисами (--).
Важно! Двойной дефис внутри комментария (--) может вызвать ошибки при валидации HTML-документа.
Так же имеються и другие стиле CamelCase, React, No-namespace о них подробную информацию можно найти в сети.
Ваша схема именования
Можно создать собственную схему именования БЭМ-сущностей. Важно, чтобы разделители в новой схеме давали возможность на программном уровне отделять блоки от элементов и модификаторов.
Для больших проектов БЭМ — отличный выбор. Он потребует некоторых усилий в начале работы, но сэкономит массу времени в долгосрочной перспективе. Так что вперёд!
Вот и всё. Если нам удасться сохранить главную ценность BЭM — изоляцию компонентом, то творить внутри самих компонентов можно будет всё что угодно. Если вы контролируете все корневые стили, то есть у вас весь-весь код разбит на пространства имён, и за их пределами селекторов нет, то вы достигли просветления и можете позволить себе всё.
Телеграм, обсуждения БЭМ https://t.me/bem_ru
Мы свяжемся
