БЭМ (Блок-Элемент-Модификатор) — методология web-разработки, а также набор интерфейсных библиотек, фреймворков и вспомогательных инструментов.
«Блок», «элемент» и «модификатор» — основные термины БЭМ. Это необходимые и достаточные понятия для описания интерфейса любой сложности.
Блок — это независимый интерфейсный компонент. Блок может быть простым или составным (содержать другие блоки). При создании блока нужно обеспечивать возможность его использования в любом месте web-страницы, а также повторения на той же самой странице. Блок должен включать в себя всю реализацию, необходимую для представления части интерфейса, которую он выражает.
Элемент — это составная часть блока. Элементы контекстно-зависимы: они имеют смысл только в рамках своего блока. Элемент — не обязательная составляющая блока, небольшие блоки обходятся без элементов.
Модификатор — это свойство блока или элемента, задающее изменения в их внешнем виде или поведении. Модификатор может быть булевым (например, button_big
) или парой ключ-значение (например, menu_type_bullet
, menu_type_numbers
). У блока или элемента может быть несколько модификаторов одновременно.
БЭМ предлагает общую семантическую модель для всех технологий, использующихся в фронтэнд разработке (HTML, CSS, JavaScript, шаблоны и др.)
Используя понятия «блок», «элемент» и «модификатор» можно описать древовидную структуру документа. Такое описание называется BEM tree и является семантическим представлением интерфейса, абстракцией над DOM tree.
В HTML/CSS блоки, элементы и модификаторы представлены в виде CSS-классов, названных согласно правилам именования (naming convention). Несколько блоков могут быть расположены на одном и том же DOM-узле, в этом случае DOM-узлу назначается 2 CSS-класса. На одном DOM-узле также могут быть одновременно расположены блок и элемент другого блока.
CSS-класс блока соответствует имени блока. Для разделения слов в сложных именах блоков используется дефис.
<div class="header">...</div> <ul class="menu">...</ul> <span class="button">...</span> <div class="tabbed-pane">...</div>
CSS-класс элемента содержит имя блока и имя элемента, разделенные двумя знаками underscore.
<div class="header"> <div class="header__bottom">...</div> </div> <ul class="menu> <li class="menu__item">...</li> </ul> <span class="button"> <input class="button__control">...</input> </span> <div class="tabbed-pane"> <div class="tabbed-pane__panel">...</div> </div>
CSS-класс модификатора содержит имя блока и имя модификатора, разделенные одним знаком underscore. В том случае, если модификатор — это пара ключ-значение, они тоже разделяются знаком underscore. Для модификатора элемента в CSS-классе сохраняются и имя блока, и имя элемента. CSS-класс модификатора используется в паре с классом своего блока (или элемента).
<div class="header header_christmas">...</div> <!-- Christmas edition of the header --> <ul class="menu"> <li class="menu__item menu__item_current">...</li> </ul> <span class="button button_theme_night">...</span> <div class="tabbed-pane tabbed-pane_disabled">...</div>
Альтернативные правила именования, предложеные Гарри Робертсом. Проверено 7 апреля 2014., советуют использовать 2 дефиса для разделения имён блока и модификатора.
<div class="header header--christmas">...</div> <!-- Christmas edition of the header --> <ul class="menu"> <li class="menu__item menu__item--current">...</li> </ul> <span class="button button--theme--night">...</span> <div class="tabbed-pane tabbed-pane--disabled">...</div>
Некоторые правила именования рекомендуют использовать префиксы. Так, все классы блоков могут начинаться с префикса b-
.
<div class="b-header">...</div> <ul class="b-menu">...</ul> <span class="b-button">...</span> <div class="b-tabbed-pane">...</div>
Иногда в качестве префикса используют сокращенное имя проекта. Например, OraanjePool-> op.
<div class="op-header">...</div> <ul class="op-menu">...</ul> <span class="op-button">...</span> <div class="op-tabbed-pane">...</div>
В БЭМ JavaScript работает с абстрактной структурой блоков-элементов и модификаторов, не обращаясь к лежащим за ним DOM-узлам и их CSS-классам напрямую. Кроме того, для идентификации DOM-узлов не используются дополнительные CSS-классы "специально для JavaScript". Для обеспечения такой возможности используется фреймворк или собственный набор хелперов.
Так, если каждому блоку с JavaScript-функциональность соответствует объект, его методы позволяют:
// предположим, что blockObj указывает на объект блока <div class="tabbed-pane"> blockObj.elem('panel'); // возвращает элементы <div class="tabbed-pane__panel">
// предположим, что blockObj указывает на объект блока <div class="tabbed-pane"> blockObj.setMod('disabled'); // устанавливает модификатор <div class="tabbed-pane tabbed-pane_disabled"> blockObj.delMod('disabled'); // удаляет модификатор
Поскольку модификатор отражает состояние блока, при назначении модификатора блок или элемент должен быть приведен в соответствующее состояние. Для изменения внешнего вида достаточно назначения CSS-класса модификатора. В более сложных случаях приведение блока в нужное состояние требует JavaScript-функциональности. Поэтому у используемого JavaScript-фреймворка должна быть возможность декларировать список действий, соответствующий модификатору.
BlockObj.do({ 'active': function() { // do smth when active }, 'disabled': function() { // do something when disabled } });
На сегодняшний день фреймворк i-bem.js
(часть библиотеки bem-core
) предлагает самую полную реализацию БЭМ-принципов в JavaScript. Информацию о фреймворке и примеры использования можно найти на страницах:
На файловой системе блоки, элементы и модификаторы представлены в виде файлов своих реализаций в различных web-технологиях. Файлы, относящиеся к одному блоку, объединяют в одну директорию.
Самая простая структура проекта не предполагает вложенности в директории блоков:
button/ button.css button.js button.tpl button__control.css header/ header.css header.tpl header_christmas.css tabbed-pane/ tabbed-pane.css tabbed-pane.js tabbed-pane.tpl
В больших проектах или библиотеках удобно использовать сложную файловую структуру блока, где для элементов и модификаторов выделяются директории.
button/ __control/ button__control.css button.css button.js button.tpl header/ _christmas/ header_christmas.css header.css header.tpl tabbed-pane/ tabbed-pane.css tabbed-pane.js tabbed-pane.tpl
Веб и веб-сайты | |
---|---|
Глобально | |
Локально | |
Виды сайтов и сервисов |
Виртуальный атлас • Баннерная сеть • Библиотека • Блог (платформа) • Видеохостинг • Вики • Сайт-визитка • Вопрос-ответ • Закладки • Службы знакомств • Браузерная игра • Каталог ресурсов • Интернет-магазин • Микроблог • Новостной сайт • Поисковая система • Порносайт • Веб-почта • Социальная сеть • Тамблелог • BitTorrent-трекер • Файлообменник • Форум (Сервис • Имиджборд) • Фотохостинг • Чат |
Создание и обслуживание |
Мастер • Разработка • Дизайн • Вёрстка • Программирование • Юзабилити • Опыт взаимодействия • Продвижение сайта • Поисковая оптимизация (SEO) • Хостинг • Системный администратор • Модератор • Учётная запись • Авторизация |
Типы макетов, страниц, сайтов |
|
Техническое | |
Маркетинг | |
Социум и культура |
Бэм марджера тату, бэм 5.
Чемпионат Нидерландов по международным шашкам среди мужчин 1959, Ландберг, Винниковский лес, Файл:Steuben - Bataille de Poitiers.png.