БЭМ

Поделись знанием:
Перейти к: навигация, поиск

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





Обзор

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

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

Блок

Блок — это независимый интерфейсный компонент. Блок может быть простым или составным (содержать другие блоки). При создании блока нужно обеспечивать возможность его использования в любом месте 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>

Иногда в качестве префикса используют сокращенное имя проекта. Например, OraanjePool-> 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.do({ 'active': function() {
        // do smth when active
    },
    'disabled': function() {
        // do something when disabled
    }
});

i-bem.js

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

  • [ru.bem.info/tutorials/bem-js-tutorial/ Пошаговое руководство по i-bem.js]. Проверено 7 апреля 2014.

Шаблоны

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

На файловой системе блоки, элементы и модификаторы представлены в виде файлов своих реализаций в различных 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. Harry Roberts. [csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ MindBEMding – getting your head ’round BEM syntax]. csswizardry (25 January, 2013). Проверено 7 июля 2015.
  2. Varvara Stepanova. [en.bem.info/articles/yandex-frontend-dev/ What you can borrow from Yandex frontend dev]. Riga WebConf, bem.info (November 2012.). Проверено 7 июля 2015.
  3. Yury Vetrov. [www.smashingmagazine.com/2015/02/04/product-design-unification-case-study-mobile-web-framework/ Product Design Unification Case Study: Mobile Web Framework]. Smasing Magazine (February 4th, 2015). Проверено 7 июля 2015.
  4. Юрий Ветров. [ru.bem.info/articles/mailru-unified-design/ Унификация дизайна: Фреймворк Mail.Ru Group для мобильного веба]. bem.info (20 мая 2015). Проверено 7 июля 2015.
  5. Andrew Hillel. Senior Web Developer, Content. [www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d How we built the new BBC Homepage]. BBC Blog (16 February 2015). Проверено 7 июля 2015.
  6. [github.com/google/material-design-lite/wiki/Understanding-BEM Understanding BEM]. material-design-lite. Проверено 7 июля 2015.

Литература

  • Varvara Stepanova. [www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/ A New Front-End Methodology: BEM]. Smashing Magazine (16 апреля 2012). Проверено 7 июля 2015.
  • Maxim Shirshin. [www.smashingmagazine.com/2014/07/17/bem-methodology-for-small-projects/ Scaling Down The BEM Methodology For Small Projects]. Smashing Magazine (July 17th, 2014). Проверено 7 июля 2015. (перевод [habrahabr.ru/company/yandex/blog/234905/ Масштабирование наоборот: БЭМ-методология Яндекса на небольших проектах])
  • Harry Roberts. [csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ MindBEMding – getting your head ’round BEM syntax]. csswizardry (25 January, 2013). Проверено 7 июля 2015.
  • Robin Rendle. [css-tricks.com/bem-101/ BEM 101]. css-tricks (April 2, 2015). Проверено 7 июля 2015.
  • Johan Ronsse, переводчик: Антон Немцев. [frontender.info/learning-to-love-bem/ Учимся любить БЭМ]. Frontender Magazine (3 июня 2015 года). Проверено 7 июля 2015.

Ссылки

  • [ru.bem.info/ Официальный сайт БЭМ]. Проверено 7 апреля 2014.
  • [clubs.ya.ru/bem/ Русскоязычный клуб разработчиков (закрыт)]. Проверено 8 февраля 2015.
  • [ru.bem.info/forum/ Русскоязычный форум разработчиков]. Проверено 8 февраля 2015.
  • [twitter.com/bem_ru Официальный Twitter БЭМ]. Проверено 7 апреля 2014.
  • [blog.adn.agency/kaskadirovanie-i-bem/ Сравнение БЭМ и Каскадирования )]. Проверено 3 июня 2016.


Отрывок, характеризующий БЭМ

С того дня, как Пьер, уезжая от Ростовых и вспоминая благодарный взгляд Наташи, смотрел на комету, стоявшую на небе, и почувствовал, что для него открылось что то новое, – вечно мучивший его вопрос о тщете и безумности всего земного перестал представляться ему. Этот страшный вопрос: зачем? к чему? – который прежде представлялся ему в середине всякого занятия, теперь заменился для него не другим вопросом и не ответом на прежний вопрос, а представлением ее. Слышал ли он, и сам ли вел ничтожные разговоры, читал ли он, или узнавал про подлость и бессмысленность людскую, он не ужасался, как прежде; не спрашивал себя, из чего хлопочут люди, когда все так кратко и неизвестно, но вспоминал ее в том виде, в котором он видел ее в последний раз, и все сомнения его исчезали, не потому, что она отвечала на вопросы, которые представлялись ему, но потому, что представление о ней переносило его мгновенно в другую, светлую область душевной деятельности, в которой не могло быть правого или виноватого, в область красоты и любви, для которой стоило жить. Какая бы мерзость житейская ни представлялась ему, он говорил себе:
«Ну и пускай такой то обокрал государство и царя, а государство и царь воздают ему почести; а она вчера улыбнулась мне и просила приехать, и я люблю ее, и никто никогда не узнает этого», – думал он.
Пьер все так же ездил в общество, так же много пил и вел ту же праздную и рассеянную жизнь, потому что, кроме тех часов, которые он проводил у Ростовых, надо было проводить и остальное время, и привычки и знакомства, сделанные им в Москве, непреодолимо влекли его к той жизни, которая захватила его. Но в последнее время, когда с театра войны приходили все более и более тревожные слухи и когда здоровье Наташи стало поправляться и она перестала возбуждать в нем прежнее чувство бережливой жалости, им стало овладевать более и более непонятное для него беспокойство. Он чувствовал, что то положение, в котором он находился, не могло продолжаться долго, что наступает катастрофа, долженствующая изменить всю его жизнь, и с нетерпением отыскивал во всем признаки этой приближающейся катастрофы. Пьеру было открыто одним из братьев масонов следующее, выведенное из Апокалипсиса Иоанна Богослова, пророчество относительно Наполеона.
В Апокалипсисе, главе тринадцатой, стихе восемнадцатом сказано: «Зде мудрость есть; иже имать ум да почтет число зверино: число бо человеческо есть и число его шестьсот шестьдесят шесть».
И той же главы в стихе пятом: «И даны быта ему уста глаголюща велика и хульна; и дана бысть ему область творити месяц четыре – десять два».
Французские буквы, подобно еврейскому число изображению, по которому первыми десятью буквами означаются единицы, а прочими десятки, имеют следующее значение:
a b c d e f g h i k.. l..m..n..o..p..q..r..s..t.. u…v w.. x.. y.. z
1 2 3 4 5 6 7 8 9 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150 160
Написав по этой азбуке цифрами слова L'empereur Napoleon [император Наполеон], выходит, что сумма этих чисел равна 666 ти и что поэтому Наполеон есть тот зверь, о котором предсказано в Апокалипсисе. Кроме того, написав по этой же азбуке слова quarante deux [сорок два], то есть предел, который был положен зверю глаголати велика и хульна, сумма этих чисел, изображающих quarante deux, опять равна 666 ти, из чего выходит, что предел власти Наполеона наступил в 1812 м году, в котором французскому императору минуло 42 года. Предсказание это очень поразило Пьера, и он часто задавал себе вопрос о том, что именно положит предел власти зверя, то есть Наполеона, и, на основании тех же изображений слов цифрами и вычислениями, старался найти ответ на занимавший его вопрос. Пьер написал в ответе на этот вопрос: L'empereur Alexandre? La nation Russe? [Император Александр? Русский народ?] Он счел буквы, но сумма цифр выходила гораздо больше или меньше 666 ти. Один раз, занимаясь этими вычислениями, он написал свое имя – Comte Pierre Besouhoff; сумма цифр тоже далеко не вышла. Он, изменив орфографию, поставив z вместо s, прибавил de, прибавил article le и все не получал желаемого результата. Тогда ему пришло в голову, что ежели бы ответ на искомый вопрос и заключался в его имени, то в ответе непременно была бы названа его национальность. Он написал Le Russe Besuhoff и, сочтя цифры, получил 671. Только 5 было лишних; 5 означает «е», то самое «е», которое было откинуто в article перед словом L'empereur. Откинув точно так же, хотя и неправильно, «е», Пьер получил искомый ответ; L'Russe Besuhof, равное 666 ти. Открытие это взволновало его. Как, какой связью был он соединен с тем великим событием, которое было предсказано в Апокалипсисе, он не знал; но он ни на минуту не усумнился в этой связи. Его любовь к Ростовой, антихрист, нашествие Наполеона, комета, 666, l'empereur Napoleon и l'Russe Besuhof – все это вместе должно было созреть, разразиться и вывести его из того заколдованного, ничтожного мира московских привычек, в которых, он чувствовал себя плененным, и привести его к великому подвигу и великому счастию.
Пьер накануне того воскресенья, в которое читали молитву, обещал Ростовым привезти им от графа Растопчина, с которым он был хорошо знаком, и воззвание к России, и последние известия из армии. Поутру, заехав к графу Растопчину, Пьер у него застал только что приехавшего курьера из армии.
Курьер был один из знакомых Пьеру московских бальных танцоров.
– Ради бога, не можете ли вы меня облегчить? – сказал курьер, – у меня полна сумка писем к родителям.
В числе этих писем было письмо от Николая Ростова к отцу. Пьер взял это письмо. Кроме того, граф Растопчин дал Пьеру воззвание государя к Москве, только что отпечатанное, последние приказы по армии и свою последнюю афишу. Просмотрев приказы по армии, Пьер нашел в одном из них между известиями о раненых, убитых и награжденных имя Николая Ростова, награжденного Георгием 4 й степени за оказанную храбрость в Островненском деле, и в том же приказе назначение князя Андрея Болконского командиром егерского полка. Хотя ему и не хотелось напоминать Ростовым о Болконском, но Пьер не мог воздержаться от желания порадовать их известием о награждении сына и, оставив у себя воззвание, афишу и другие приказы, с тем чтобы самому привезти их к обеду, послал печатный приказ и письмо к Ростовым.
Разговор с графом Растопчиным, его тон озабоченности и поспешности, встреча с курьером, беззаботно рассказывавшим о том, как дурно идут дела в армии, слухи о найденных в Москве шпионах, о бумаге, ходящей по Москве, в которой сказано, что Наполеон до осени обещает быть в обеих русских столицах, разговор об ожидаемом назавтра приезде государя – все это с новой силой возбуждало в Пьере то чувство волнения и ожидания, которое не оставляло его со времени появления кометы и в особенности с начала войны.
Пьеру давно уже приходила мысль поступить в военную службу, и он бы исполнил ее, ежели бы не мешала ему, во первых, принадлежность его к тому масонскому обществу, с которым он был связан клятвой и которое проповедывало вечный мир и уничтожение войны, и, во вторых, то, что ему, глядя на большое количество москвичей, надевших мундиры и проповедывающих патриотизм, было почему то совестно предпринять такой шаг. Главная же причина, по которой он не приводил в исполнение своего намерения поступить в военную службу, состояла в том неясном представлении, что он l'Russe Besuhof, имеющий значение звериного числа 666, что его участие в великом деле положения предела власти зверю, глаголящему велика и хульна, определено предвечно и что поэтому ему не должно предпринимать ничего и ждать того, что должно совершиться.


У Ростовых, как и всегда по воскресениям, обедал кое кто из близких знакомых.
Пьер приехал раньше, чтобы застать их одних.
Пьер за этот год так потолстел, что он был бы уродлив, ежели бы он не был так велик ростом, крупен членами и не был так силен, что, очевидно, легко носил свою толщину.
Он, пыхтя и что то бормоча про себя, вошел на лестницу. Кучер его уже не спрашивал, дожидаться ли. Он знал, что когда граф у Ростовых, то до двенадцатого часу. Лакеи Ростовых радостно бросились снимать с него плащ и принимать палку и шляпу. Пьер, по привычке клубной, и палку и шляпу оставлял в передней.
Первое лицо, которое он увидал у Ростовых, была Наташа. Еще прежде, чем он увидал ее, он, снимая плащ в передней, услыхал ее. Она пела солфеджи в зале. Он внал, что она не пела со времени своей болезни, и потому звук ее голоса удивил и обрадовал его. Он тихо отворил дверь и увидал Наташу в ее лиловом платье, в котором она была у обедни, прохаживающуюся по комнате и поющую. Она шла задом к нему, когда он отворил дверь, но когда она круто повернулась и увидала его толстое, удивленное лицо, она покраснела и быстро подошла к нему.