Блок, Элемент, Модификатор (БЭМ, BEM)

 В получившемся HTML появляются не только узлы для блока и явно заданных элементов item, но и разметка для элементов layout и layout-unit. Эти элементы отвечают за геометрическую отрисовку блока.

В качестве контента элементов item в простых случаях используются ссылки:

{
  block: 'b-menu-vert',
  content: [
    {
      elem: 'item',
      content: {
        block: 'b-link',
        url: 'http://yandex.com',
        content: 'Index'
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link',
        url: 'http://google.com',
        content: 'Backyard'
      }
    },
    ...
  ]
}

Кроме того, у одного из элементов item может быть модификатор { state : 'current' }, отмечающий выделенный пункт меню. Модификатор используется как для визуального выделения пункта при помощи CSS-правил для этого модификатора, так и для описания функционального поведения.

{
  block: 'b-menu-vert',
  content: [
    {
      elem: 'item',
      elemMods: { state: 'current' },
      content: {
        block: 'b-link',
        url: 'http://yandex.com',
        content: 'Index'
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link',
        url: 'http://google.com',
        content: 'Backyard'
      }
    },
    ...
  ]
}

В BEMJSON описании меню может быть указано свойство title, задающее элемент title для заголовка меню:

{
  block: 'b-menu-vert',
  title: {
    elem: 'title',
    content: 'Menu title'
  },
  content: [
    {
      elem: 'item',
      elemMods: { state: 'current' },
      content: {
        block: 'b-link',
        url: 'http://yandex.com',
        content: 'Index'
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link',
        url: 'http://google.com',
        content: 'Backyard'
      }
    },
    ...
  ]
}

Предусмотрена и возможность создания пустого элемента списка для отделения одних пунктов меню от других. За это отвечает элемент separator.
На уровне переопределения проекта можно задать CSS-правила для такого элемента. Чаще всего его представляют в виде горизонтальной черты.

{
  block: 'b-menu-vert',
  content: [
    {
      elem: 'item',
      elemMods: { state: 'current' },
      content: {
        block: 'b-link',
        url: 'http://yandex.com',
        content: 'Index'
      }
    },
    {
      elem: 'separator'
    },
    {
      elem: 'item',
      content: {
        block: 'b-link',
        url: 'http://google.com',
        content: 'Backyard'
      }
    },
    ...
  ]
}

Пример простого меню со ссылками содержится и в рпепозитории библиотеки bem-bl.

Вертикальное js-меню с псевдо-ссылками

Если вместо ссылок нужно использовать псевдо-ссылки, BEMJSON меню должен отличаться содержанием элементов item:

{
  block: 'b-menu-vert',
  content: [
    {
      elem: 'item',
      elemMods: { 'state' : 'current' },
      content: {
        block: 'b-link',
        mods : { 'pseudo' : 'yes' },
        url: '/',
        content: 'First point'
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link',
        mods : { 'pseudo' : 'yes'},
        url: '/',
        content: 'Second point'
      }
    },
    ...
  ]
}

Кроме внешнего вида, js-меню отличается и клиентской функциональностью: оно способно по клику левой кнопкой мыши переключать соответствующий пункт меню в состояние { state : 'current' } и генерировать на js-объекте, соответствующем блоку, событие о факте переключения пункта меню.
Для использования этой функциональности необходимо определить, где у меню будут расположены элементы item-selector, реагирующие на клик. Эти элементы нарочно сделаны несовпадающими с элементами item, потому что чаще всего сам пункт меню больше по размеру, чем его активная область.
Элемент item-selector можно использовать как сам по себе, так и примешивая его к другим элементам или блокам. В данном случае можно сделать mix с псевдо-ссылками:

{
  block: 'b-menu-vert',
  content: [
    {
      elem: 'item',
      elemMods: { 'state' : 'current' },
      content: {
        block: 'b-link',
        mods : { 'pseudo' : 'yes' },
        mix: [{ block: 'b-menu-vert', elem: 'item-selector'}],
        url: '/',
        content: 'First point'
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link',
        mods : { 'pseudo' : 'yes'},
        mix: [{ block: 'b-menu-vert', elem: 'item-selector'}],
        url: '/',
        content: 'Second point'
      }
    },
    ...
  ]
}

Пример простого вертикального js-меню есть в папке блока в библиотеке bem-bl.

Вертикальное js-меню со сложным контентом

Пункты меню могут содержать не один, а несколько блоков. В библиотеке bem-bl есть пример такого меню. Его пункты помимо ссылок содержат иконки.

Поскольку реакция на клик необходима для всего содержания пункта меню, элемент item-selector используется в таком случае в явном виде, являясь контейнером для содержания пункта меню. В этом случае он представлен в DOM-дереве узлом span:

{
  elem: 'item',
  content: {
    elem: 'item-selector',
    content: [
      {
        block: 'b-link',
        mods : { 'pseudo' : 'yes', 'inner' : 'yes' },
        mix: [{ block: 'b-menu-vert', elem: 'item-selector'}],
        url: '/',
        content: [
          {
            block: 'b-icon',
            url: 'http://yandex.st/lego/_/Kx6F6RQnQFitm0qRxX7vpvfP0K0.png',
            alt: 'Yandex favicon'
          },
          {
            elem: 'inner',
            content: 'Second point'
          }
        ]
      },
      ' One more element here'
    ]
  }
}

Раскрывающееся вертикальное js-меню

Переключение активного пункта меню - не единственная реализованная динамическая функциональность. Пункты меню также могут содержать элементы trigger, клик по которым открывает или скрывает дочерний контент. С помощью таких элементов можно реализовать скрывающиеся вложенные меню.

Так же, как и элемент item-selector, элемент trigger может использоваться не явно, а через mix.

{
  block: 'b-menu-vert',
  content: [
    {
      elem: 'item',
      elemMods: { state: 'current' },
      content: 'Videos'
    },
    {
      elem: 'item',
      content: {
        block: 'b-link',
        mods: { pseudo: 'yes', inner: 'yes'},
        mix: [{ block: 'b-menu-vert', elem: 'trigger'],
        content: [
          {
            block: 'b-icon',
            mix: [{ block: 'b-menu-vert', elem: 'trigger-icon' }],
            alt: 'trigger'
          },
          {
            elem: 'inner',
            content: 'Images'
          }
        ]
      },
      'item-content': {
        elem: 'item-content',
        content: {
          block: 'b-menu-vert',
          mods: { 'type' : 'submenu' },
          content: [
            {
              elem: 'item',
              content: 'Any size'
            },
            {
              elem: 'item',
              content: 'Large'
            },
            {
              elem: 'item',
              content: 'Medium'
            }
          ]
        }
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link',
        url: '/',
        content: 'News'
      }
    }
  ]
}

Кроме элемента item-selector здесь используется свойство item-content, описывающее элемент item-content с содержанием, которое показывается или скрывается в зависимости от кликов по элементу item-selector.

Элемент trigger-icon используется только для обозначения иконки. На уровне переопределения соответствующего примера в bem-bl реализованы CSS-правила, показывающие одну иконку для триггера с открытым состоянием и другую для триггера с закрытым состоянием.

По умолчанию элемент trigger не содержит модификатора state, а элемент item-content не содержит модификатора visibility. В этом состоянии содержание элемента item-content не видно.
При клике на элементе trigger левой кнопкой мыши он приобретает модификатор { state : 'opened' }. Элемент item-content в это же время приобретает модификатор { visibility : 'visible' } и становится виден на странице.

Если нужно сразу показать вложенное меню раскрытым, эти модификаторы следует явно задать в BEMJSON-описании блока:

{
  block: 'b-link',
  mods: { pseudo: 'yes', inner: 'yes'},
  mix: [{ block: 'b-menu-vert', elem: 'trigger', elemMods: { state: 'opened' }}],
  content: [
    ...
}

'item-content': {
  elem: 'item-content',
  elemMods: { visibility: 'visible'},
  content: ...

В библиотеке bem-bl также есть пример меню с неоднократной вложенностью триггеров.

Вложенные меню

BEMJSON позволяет вкладывать одни блоки в другие. Содержанием пункта меню может быть другое меню, и тогда естественным образом образуется вложенность.
Такое использование меню создаст в DOM-дереве два блока (и два узла ul), которые будут вести себя соответственно.

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

Элемент submenu должен содержаться в элементе item-content и включать в себя описание элементов item для "подменю".

Пример для вложенного меню в библиотеке bem-bl демонстрирует такое BEMJSON-описание.

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

Для начала рекомендуется ознакомиться с базовыми понятиями JavaScript-реализации в библиотеке bem-bl: bem.github.com/.../i-bem.ru.html.

JavaScript-реализация блока b-menu-horiz в этом случае сводится к декларации блока с указанием базы:

BEM.DOM.decl({ name: 'b-menu-horiz', baseBlock: 'i-menu' });

Такая запись означает, что все методы и свойства JavaScript-объекта блока будут унаследованы от i-menu.

JavaScript блока i-menu

Блок i-menu задекларирован как блок, имеющий DOM-представление:

BEM.DOM.decl('i-menu',
...
)

У блока есть динамические и статические методы и свойства.

Наличие статического метода live блока означает, что bem-объект (JavaScript объект в памяти браузера) создаётся не сразу при общей инициализации блоков на странице, а при возникновении определённых условий.

live : function() {
    this.liveBindTo('item-selector', 'leftclick', function(e) {
        this.onItemSelectorClick(e);
    });
}

В теле метода использован метод liveBindTo, позволяющий инициализировать блок при возникновении события. В данном случае - при возникновении события leftclick на любом из элементов item-selector блока.
Использование события leftclick (вместо click) позволяет реагировать только на клик левой кнопкой мыши. Такая возможность предоставляется специалиным плагином для jQuery, реализованным в элементе i-jqueryleftclick.
Callback-функция, переданная в метод, будет исполняться при каждом клике.

Метод onItemSelectorClick относится к конкретному инстансу блока и, соответственно, реализован как динамический метод блока:

onItemSelectorClick : function(e) {

    var item = this._getItemByEvent(e);
    this.setMod(item, 'state', 'current');

}

В результате работы этого метода соответствующий пункт меню приобретает модификатор { state : 'current' }.

Для вычисления соответствующего пункта меню используется метод _getItemByEvent:

_getItemByEvent : function(e) {
    return e.data.domElem.closest(this.buildSelector('item'));
}

Поскольку клик случается не на элементе item, его нужно вычислять относительно элемента, на котором возникло событие.
Необходимость слушать событие не на элементе item, а на содержащемся в нём элементе item-selector продиктована тем, что элемент item чаще всего больше, чем область, которая должна реагировать на клик. Кроме того, использование специального элемента для реакции на клик позволяет при необходимости сделать так, что эта реакция будет лишь у одного из блоков, содержащихся в пункте меню.

При переключении какого-либо пункта меню в активное состояние на bem-объекте блока возникает событие trigger. Код, обеспечивающий это, записан в декларативном стиле в свойстве onElemSetMod блока:

onElemSetMod : {

    'item' : {

        'state': {

            'current' : function(elem, modName, modVal, oldModVal) {

                if (oldModVal == 'disabled') return false;

                var prev = this.elem('item', 'state', 'current');
                this
                    .delMod(prev, 'state')
                    .trigger('current', {
                        prev    : prev,
                        current : elem
                    });
            }
        }
    }
}

Эта функция исполняется при любой попытке приобретения элементом item модификатора state в значении current (не только при клике). Например, если существует какой-то другой блок, который в ходе своей работы меняет текущий пункт меню, функция исполнится.

Функция возвращает false в том случае, если данный элемент находится в состоянии disabled (это тоже значение модификатора state). Возвращение функцией значения false отменяет установку модификатора. То есть неактивный пункт меню не может стать выделенным.

В результате работы функции при каждом переключении активного пункта меню на блоке возникает событие trigger с данными о предыдущем и текущем активном пункте меню. Это событие может слушать другой блок, и по факту возникновения этого события выполнять какие-либо действия.
Например, при клике на пункты меню можно загружать информацию по AJAX и менять контент в другой части страницы.

Дополнительная информация по JavaScript-реализациям в библиотеке bem-bl:

• Мастер-класс "JavaScript в БЭМ-терминах" на YAC2011
• Доклад "i-bem.js - блок, помогающий делать другие блоки"

Простое горизонтальное меню

Входные данные для блока с любым из этих модификаторов похожи: нужно описать блок, модификатор layout, в качестве свойства content блока перечислить пункты меню, которые выражаются элементами item:

{
  block: 'b-menu-horiz',
  mods: { layout: 'normal' },
  content: [
    {
      elem: 'item',
      content: 'Home'
    },
    {
      elem: 'item',
      content: 'Office'
    },
    ...
  ]
}

Содержанием элементов меню может быть что угодно: ссылки на страницы, псевдо-ссылки, иконки и вообще любые блоки. В примере выше каждый пункт меню - это просто строка текста.

Такое же меню со ссылками будет выглядеть следующим образом:

{
  block: 'b-menu-horiz',
  mods: { layout: 'normal' },
  content: [
    {
      elem: 'item',
      content: {
        block: 'b-link', url: '/', content: 'Home'
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link', url: '/office', content: 'Office'
      }
    },
    ...
  ]
}

Кроме того, у одного из пунктов меню может быть указан модификатор { state: 'current' }, этот модификатор помечает текущий пункт меню.
На своём уровне переопределения можно реализовать для такого модификатора CSS-правила, по которым текущий пункт меню будет визуально отличаться от остальных.

У меню также может быть необязательное свойство title, содержащее описание элемента title - заголовка меню.
Для меню с заголовком BEMJSON будет такой:

{
  block: 'b-menu-horiz',
  mods: { layout: 'normal' },
  title: {
    elem: 'title', content: 'Navigation:'
  },
  content: [
    {
      elem: 'item',
      elemMods: { state: 'current' },
      content: {
        block: 'b-link', url: '/', content: 'Home'
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link', url: '/office', content: 'Office'
      }
    },
    ...
  ]
}

Горизонтальное меню с клиентской функциональностью

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

{
  block: 'b-menu-horiz',
  mods: { layout: 'normal' },
  title: {
    elem: 'title', content: 'Navigation:'
  },
  content: [
    {
      elem: 'item',
      elemMods: { state: 'current' },
      content: {
        block: 'b-link',
        mods: { 'pseudo': 'yes' },
        url: '/',
        content: 'Home'
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link',
        mods: { 'pseudo': 'yes' },
        url: '/office',
        content: 'Office'
      }
    },
    ...
  ]
}

Приведённый выше BEMJSON блока обеспечит нужный внешний вид.
Кроме этого нужно, чтобы у меню были области, реагирующие на клик. В данном случае они совпадают с псевдо-ссылками, поэтому можно применить смешивание блоков (mix) :

{
  block: 'b-menu-horiz',
  mods: { layout: 'normal' },
  title: {
    elem: 'title', content: 'Navigation:'
  },
  content: [
    {
      elem: 'item',
      elemMods: { state: 'current' },
      content: {
        block: 'b-link',
        mods: { 'pseudo': 'yes' },
        mix: [{ block: 'b-menu-horiz', elem : 'item-selector' }],
        url: '/',
        content: 'Home'
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link',
        mods: { 'pseudo': 'yes' },
        mix: [{ block: 'b-menu-horiz', elem : 'item-selector' }],
        url: '/office',
        content: 'Office'
      }
    },
    ...
  ]
}

JavaScript код блока реализован так, что активный пункт меню переключается при клике левой кнопкой мыши на соответствующем элементе item-selector.

При явном использовании этот элемент представлен в DOM в виде span, в который можно положить блоки, составляющие пункт меню. Если же содержание пункта меню состоит всего из одного блока (как в примере с псевдо-ссылками), для экономии разметки разумно применять mix.

Кроме того, что соответствующий элемент item в результате клика приобретает модификатор { state : 'current' }, на bem-объекте блока возникает событие current, сопровождающееся данными о текущем и предыдущем активных пунктах.
В своём JavaScript-приложении можно реагировать на это событие.

В HTML по умолчанию блок представлен как имеющий JavaScript-реализацию (он смешан с блоком i-bem и имеет соответствующие параметры в атрибуте onclick). Но если в блоке отсутствуют элементы item-selector, bem-объект блока не создаётся.
Примешивание блока i-bem можно устранить, если указать свойство js блока как false:

Меню без подмешивания блока i-bem

{
  block: 'b-menu-horiz',
  js: false,
  mods: { layout: 'normal' },
  content: [
    {
      elem: 'item',
      content: {
        block: 'b-link', url: '/', content: 'Home'
      }
    },
    {
      elem: 'item',
      content: {
        block: 'b-link', url: '/office', content: 'Office'
      }
    },
    ...
  ]
}

Горизонтальное меню с табличной разметкой

Использование блока с модификатором { layout: 'complex' } принципиально ничем не отличается. Для блока в такой модификации создаётся разметка на основе таблицы. Такое решение может потребоваться при некоторых дизайнах.

Аскетичное горизонтальное меню

В некоторых случаях для вывода меню не нужны даже DOM-узлы списка, а достаточно просто перечислить ссылки, разделив их пробелом, запятой или каким-либо специальным символом.

Для вывода такого меню подходит реализация с модификатором { layout : 'simple' }:

{
  block: 'b-menu-horiz',
  mods: { layout: 'simple' },
  separator: ' | ',
  content: [
    {
      elem: 'item',
      elemMods: { state: 'current' },
      content: 'Home'
    },
    {
      elem: 'item',
      content: {
      block: 'b-link',
      url: '/',
      content: 'Products'
    },
    ...
  ]
}

BEMJSON меню отличается наличием свойства separator - того самого специального символа, который разделяет пункты меню.
Активный пункт меню в данном примере представлен в виде простого текста в теге span.

Примеры всех описанных здесь применений блока b-menu-horiz можно найти в директории блока в репозитории библиотеки bem-bl: bem.github.com/bem-bl/.../b-menu-horiz/examples.

Установка необходимых штук

$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs

    var http = require('http');
    http.createServer(function (req, res) {
      console.log('Request');
      res.writeHead(200, {'Content-Type': 'text/plain'});
      res.end('Hello World\n');
    }).listen(1337, "127.0.0.1");
    console.log('Server running at http://127.0.0.1:1337/');

$ node hello.js 

=)

$ curl http://npmjs.org/install.sh | sudo sh
$ echo 'export NODE_PATH="'$(npm root -g):$NODE_PATH'"'>>  ~/.bashrc && . ~/.bashrc
$ sudo npm install -g bem xjst ometajs borschik node-inherit cssp csso

$ bem
$ bem --help

$ sudo add-apt-repository ppa:chris-lea/uglifyjs
$ sudo apt-get update
$ sudo apt-get install uglifyjs

Поехали! Начал фигичать.

$ mkdir ~/bemtest
$ cd ~/bemtest

$ git clone https://github.com/tadatuta/BEM-on-YaC.git bempress

.
`-- bempress
    |-- bem
    |   `-- techs
    |       `-- php.js
    |-- make-page
    `-- README.md

$ cd bempress

$ bem create level pages

.
|-- bem
|   `-- techs
|       `-- php.js
|-- make-page
|-- pages
|   `-- .bem
|       `-- level.js
`-- README.md

$ bem create block index -l pages -t bemjson.js

.
|-- bem
|   `-- techs
|       `-- php.js
|-- make-page
|-- pages
|   |-- .bem
|   |   `-- level.js
|   `-- index
|       `-- index.bemjson.js
`-- README.md

({  
    block: 'page',
    content: [
    { block: 'header' },
    { block: 'content' },
    { block: 'footer' },
    ]
})

$ bem create block header content footer -l blocks -t php -t css

.
|-- bem
|   `-- techs
|       `-- php.js
|-- blocks
|   |-- content
|   |   |-- content.css
|   |   `-- content.php
|   |-- footer
|   |   |-- footer.css
|   |   `-- footer.php
|   `-- header
|       |-- header.css
|       `-- header.php
|-- make-page
|-- pages
|   |-- .bem
|   |   `-- level.js
|   `-- index
|       `-- index.bemjson.js
`-- README.md

.header
{
    /* ... */
}

$ mkdir ../wp-content/themes/yac/ -p

$ ./make-page index

.
|-- bempress
|   |-- bem
|   |   `-- techs
|   |       `-- php.js
|   |-- blocks
|   |   |-- content
|   |   |   |-- content.css
|   |   |   `-- content.php
|   |   |-- footer
|   |   |   |-- footer.css
|   |   |   `-- footer.php
|   |   `-- header
|   |       |-- header.css
|   |       `-- header.php
|   |-- make-page
|   |-- pages
|   |   |-- .bem
|   |   |   `-- level.js
|   |   `-- index
|   |       |-- index.bemdecl.js
|   |       |-- index.bemjson.js
|   |       `-- index.deps.js
|   `-- README.md
`-- wp-content
    `-- themes
        `-- yac
            |-- index.php
            |-- _script.js
            |-- __style.css
            |-- _style.css
            |-- style.css
            |-- __style.ie.css
            |-- _style.ie.css
            `-- style.ie.css

header
content
footer

.header{color:#00f}.content{color:red}.footer{color:silver} 

$ cd bempress/
$ bem create block 404 -l pages -t bemjson.js

.
|-- bem
|   `-- techs
|       `-- php.js
|-- blocks
|   |-- content
|   |   |-- content.css
|   |   `-- content.php
|   |-- footer
|   |   |-- footer.css
|   |   `-- footer.php
|   `-- header
|       |-- header.css
|       `-- header.php
|-- make-page
|-- pages
|   |-- 404
|   |   `-- 404.bemjson.js
|   |-- .bem
|   |   `-- level.js
|   `-- index
|       |-- index.bemdecl.js
|       |-- index.bemjson.js
|       `-- index.deps.js
`-- README.md

({
    block: 'page',
    content: [
    { block: 'header' },
    { block: 'footer' },
    ]   
})

$ ./make-page 404

.
|-- bempress
|   |-- bem
|   |   `-- techs
|   |       `-- php.js
|   |-- blocks
|   |   |-- content
|   |   |   |-- content.css
|   |   |   `-- content.php
|   |   |-- footer
|   |   |   |-- footer.css
|   |   |   `-- footer.php
|   |   `-- header
|   |       |-- header.css
|   |       `-- header.php
|   |-- make-page
|   |-- pages
|   |   |-- 404
|   |   |   |-- 404.bemdecl.js
|   |   |   |-- 404.bemjson.js
|   |   |   `-- 404.deps.js
|   |   |-- .bem
|   |   |   `-- level.js
|   |   `-- index
|   |       |-- index.bemdecl.js
|   |       |-- index.bemjson.js
|   |       `-- index.deps.js
|   `-- README.md
`-- wp-content
    `-- themes
        `-- yac
            |-- 404.php
            |-- index.php
            |-- _script.js
            |-- __style.css
            |-- _style.css
            |-- style.css
            |-- __style.ie.css
            |-- _style.ie.css
            `-- style.ie.css

header
footer

=)