Русская Википедия:БЭМ

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

Файл:Логотип BEM.png

Обзор

Основные понятия

«Блок», «элемент» и «модификатор» — основные термины БЭМ. Это необходимые и достаточные понятия для описания интерфейса любой сложности.

Блок

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

Элемент

Элемент — это составная часть блока. Элементы контекстно-зависимы: они имеют смысл только в рамках своего блока. Элемент — не обязательная составляющая блока, небольшие блоки обходятся без элементов.

Модификатор

Модификатор — это свойство блока или элемента, задающее изменения в их внешнем виде или поведении. Модификатор может быть булевым (например, button_big) или парой ключ-значение (например, menu_type_bullet, menu_type_numbers). У блока или элемента может быть несколько модификаторов одновременно.

"Цель создания БЭМ"

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

Используя понятия «блок», «элемент» и «модификатор» можно описать древовидную структуру документа. Такое описание называется BEM tree и является семантическим представлением интерфейса, абстракцией над DOM tree.

Применение БЭМ в различных web-технологиях

HTML/CSS

В 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>

Правила именования БЭМ-классов от Гарри Робертса

Альтернативные правила именования были предложены Гарри Робертсом^[1]. Он советует использовать 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>

Иногда в качестве префикса используют сокращённое имя проекта. Например, OrangePool-> op.

<div class="op-header">...</div>

<ul class="op-menu">...</ul>

<span class="op-button">...</span>

<div class="op-tabbed-pane">...</div>

JavaScript

В БЭМ 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.on({
    active: function() {
        // do smth when active
    },
    disabled: function() {
        // do something when disabled
    }
});

i-bem.js

На сегодняшний день фреймворк i-bem.js (часть библиотеки bem-core) предлагает самую полную реализацию БЭМ-принципов в JavaScript. Информацию о фреймворке и примеры использования можно найти на страницах:

Шаблон:Cite web

Шаблоны

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

На файловой системе блоки, элементы и модификаторы представлены в виде файлов своих реализаций в различных 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

Применение

Методология разработана в компании Яндекс и широко используется в продуктах этой компании^[2].

Она нашла применение в составе специально разработанного HTML5-фреймворка при редизайне и рефакторинге почтового сервиса mail.ru^[3]^[4].

Эту же методологию, помимо всего прочего, использовала и телерадиокомпания Би-Би-Си при разработке своего нового сайта^[5].

БЭМ также использована в таком выпущенном в 2015 году продукте Google, как Material Design Lite, HTML5-фреймворке, наподобие Twitter Bootstrap, поддерживающим Material design^[6].

Примечания

Шаблон:Примечания

Литература

Ссылки

[1] Шаблон:Cite web

[2] Шаблон:Cite web

[3] Шаблон:Cite web

[4] Шаблон:Cite web

[5] Шаблон:Cite web

[6] Шаблон:Cite web

[1]

[2]

[3]

[4]

[5]

[6]

Партнерские ресурсы
Криптовалюты	Обмен криптовалют - www.bestchange.ru Криптовалютная биржа CoinEx Криптовалютная биржа Binance HIVE OS - операционная система для майнинга e4pool - Мультивалютный пул для майнинга.
Магазины	AliExpress — глобальная виртуальная (в Интернете) торговая площадка, предоставляющая возможность покупать товары производителей из КНР; computeruniverse.net - Интернет-магазин компьютеров(Промо код 5 Евро на первую покупку:FWWC3ZKQ);
Хостинг	DigitalOcean - американский провайдер облачных инфраструктур, с главным офисом в Нью-Йорке и с центрами обработки данных по всему миру;
Разное	Викиум - Онлайн-тренажер для мозга Like Центр - Центр поддержки и развития предпринимательства. Gamersbay - лучший магазин по бустингу для World of Warcraft. Ноотропы OmniMind N°1 - Усиливает мозговую активность. Повышает мотивацию. Улучшает память. Санкт-Петербургская школа телевидения - это федеральная сеть образовательных центров, которая имеет филиалы в 37 городах России. Lingualeo.com — интерактивный онлайн-сервис для изучения и практики английского языка в увлекательной игровой форме. Junyschool (Джунискул) – международная школа программирования и дизайна для детей и подростков от 5 до 17 лет, где ученики осваивают компьютерную грамотность, развивают алгоритмическое и креативное мышление, изучают основы программирования и компьютерной графики, создают собственные проекты: игры, сайты, программы, приложения, анимации, 3D-модели, монтируют видео. Умназия - Интерактивные онлайн-курсы и тренажеры для развития мышления детей 6-13 лет SkillBox - это один из лидеров российского рынка онлайн-образования. Среди партнеров Skillbox ведущий разработчик сервисного дизайна AIC, медиа-компания Yoola, первое и самое крупное русскоязычное аналитическое агентство Tagline, онлайн-школа дизайна и иллюстрации Bang! Bang! Education, оператор PR-рынка PACO, студия рисования Draw&Go, агентство performance-маркетинга Ingate, scrum-студия Sibirix, имидж-лаборатория Персона. «Нетология» — это университет по подготовке и дополнительному обучению специалистов в области интернет-маркетинга, управления проектами и продуктами, дизайна, Data Science и разработки. В рамках Нетологии студенты получают ценные теоретические знания от лучших экспертов Рунета, выполняют практические задания на отработку полученных навыков, общаются с экспертами и единомышленниками. Познакомиться со всеми продуктами подробнее можно на сайте https://netology.ru, линейка курсов и профессий постоянно обновляется. StudyBay Brazil – это онлайн биржа для португалоговорящих студентов и авторов! Студент получает уникальную работу любого уровня сложности и больше свободного времени, в то время как у автора появляется дополнительный заработок и бесценный опыт. Автор24 — самая большая в России площадка по написанию учебных работ: контрольные и курсовые работы, дипломы, рефераты, решение задач, отчеты по практике, а так же любой другой вид работы. Сервис сотрудничает с более 70 000 авторов. Более 1 000 000 работ уже выполнено. StudyBay – это онлайн биржа для англоязычных студентов и авторов! Студент получает уникальную работу любого уровня сложности и больше свободного времени, в то время как у автора появляется дополнительный заработок и бесценный опыт.