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

Новое в мире БЭМ за последнее время

Wed, 01 Feb 2012 11:37:23 +0400

Социальщина

Мы сделали группу в Facebook, присылайте заявки.

Актуальные задачи

В трекере библиотеки bem-bl всегда есть задачи. Сейчас важно перевести существующую документацию на английский, вот список тасков: https://github.com/bem/bem-bl/issues?labels=RU-EN+translation&sort=created&direction=desc&state=open&page=1

Workflow работы такой:

Вы делаете себе fork репозитория bem-bl
Инструкция про Fork
Правите (или создаёте) документацию на английском (в ветке master)
Английское описание блоков, элементов и модификаторах лежит в файлах *.en.title.txt
и *.en.wiki этих блоков, элементов и модификаторов.
Пушите изменения в свой fork
Делаете Pull Request, чтобы ваши изменения были приняты в основном репозитории
Инструкция про Pull Request'ы

Вакансия

У нас в команде есть вакансия разработчика интерфейсов. Но сначала надо сделать Pull Request.

Что такое БЭМ?

Mon, 21 Nov 2011 16:54:47 +0400

toivonens поделилась ссылкой

Большая статья о том, что такое БЭМ. С картинками.
Отныне изучение БЭМ рекомендуется начинать с прочтения этой статьи.

Использование вертикального меню b-menu-vert

Fri, 18 Nov 2011 18:56:21 +0400

Блок b-menu-vert - это меню с вертикальной ориентацией.

На странице документации блока видно, что у блока есть разные элементы. Но не все они обязательны к использованию.

Простое вертикальное меню

В простейшем случае в BEMJSON достаточно объявить блок и перечислить его элементы item в свойстве content:

{
  block: 'b-menu-vert',
  content: [
    {
      elem: 'item',
      content: 'Index'
    },
    {
      elem: 'item',
      content: 'Contacts'
    },
    ...
  ]
}

В получившемся 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 реализация горизонтального меню

Wed, 16 Nov 2011 14:16:31 +0400

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

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

Точно такая же функциональность нужна и для вертикального меню. Поэтому она реализована в блоке-хелпере i-menu (абстрактное меню).

Для начала рекомендуется ознакомиться с базовыми понятиями 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:

Использование и реализация блока b-menu-horiz

Wed, 09 Nov 2011 15:51:32 +0400

Блок b-menu-horiz создаёт HTML-разметку для горизонтального меню. Кроме того, у блока есть JavaScript-функциональность, позволяющая создавать скрипты с реакцией на выбор пункта меню.

Сложность HTML-разметки меню зависит от модификатора, с которым используется блок.

Реализован модификатор блока layout с тремя возможными значениями:

normal
complex
simple

Без модификатоора layout блок использоваться не может.

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

Входные данные для блока с любым из этих модификаторов похожи: нужно описать блок, модификатор 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.

Конспект мастер-класса "Тема для WordPress в БЭМ" на YaC

Tue, 25 Oct 2011 16:22:41 +0400

У меня есть мечта. Вообще у меня их много, но сейчас я хочу поделится одной
из них. Так вот, моя мечта в том, чтобы научится работать с BEM.

На YaC я был на мастер классах, но там я понял недостаточно чтобы
использовать BEM.

На днях у меня был очередной подход к этой Методологии — я повторил
своими руками почти все что показал tadatuta в своем мастер-классе на
конференции YaC.

У меня так получается, что я гораздо лучше понимаю что-нибудь, когда я про
это рассказываю, поэтому я записал все свои действия. В итоге у меня получился
небольшой текст про BEM с самого начала. Этот текст почти полностью
повторяет все что показал tadatuta.

Мой рабочий компьютер — это linux машина. На десктопе я использую
Ubuntu 10.04 LTS и я считаю это очень удобным и правильным. В большинстве
док рассказывается как работать с BEM с мака, с линукса все очень похоже,
но есть небольшие различия.

Я поставил перед собой следующие цель создать самое элементарное приложение
на BEM. В своем докладе tadatuta рассказывал о создании темы для wordpress.
Но поднимать веб сервер с wordpress на своей машине я не стал. Ограничился
тем что у меня просто создаются php файлы.

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

Для работы BEM нужен node.js, на убунту он ставится очень просто:


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

Проверяю что эта балалайка работает. Создаю файл hello.js со следующим
содержанием:


    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

Захожу браузером, все работает. Зашибенно. =)

Судя по шпаргалке к мастерклассу
нужно использовать пакетный менеджер nodejs - http://npmjs.org/
Использовать какой-либо другой пакетный менеджер кроме как нативного
дебиановского мне не кажется хорошей идеей, но я тем не менее делаю:


$ 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
$ bem --help

Еще в проекте используется uglifyjs. Чуть-чуть забегаю вперед скажу, что он
у меня не заработал, но ставится на убунту он так:


$ 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

После получения этого репозитория с github проект выглядит так:


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

README.md — понятно, чуть-чуть описания. Для тех кто не знаком с
github, расширение md - это сокращение от markdown, в этом файле можно
использовать специальный синтаксис.
make-page — файл для сборки страниц. У меня почему-то не заработал uglifyjs,
поэтому последнюю строку в этом файле я закоментил.

Дальше заходим в папку — это вот то действие, которое на Яке Володя не
сделал, поэтому не сразу все получилось.


$ cd bempress

Магическая команда:


$ bem create level pages

На самом деле она выполняет очень простое действие - просто создает папку
pages и пустой файл pages/.bem/level.js. После выполнения этого действия
структура проекта выглядит так:


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

В папке pages будут находится файлы, которые описывают страницы. Создадим
вот это описание:


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

Это создаст пустой файл pages/index/index.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' },
    ]
})

В этом описании мы используем 3 блока: header, content, footer, но пока у
нас их нет. Самое время создать:


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

Это создает папочку blocks и шаблоны файлов указанных блоков. Структура
проекта:


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

Файлы *.php пустые, а в css файлах уже есть заготовка, типа такой:


.header
{
    /* ... */
}

В файлы *.php пишем какой-нибудь текст. В качестве примера в каждый из этих
файлов я просто написал его имя, а в css файлы тоже пишем что-то
экспериментальное. Дальше - самый интересный этап. Нужно все это собрать.

Для этого для начала создаем папку куда все это сложится:


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

И собираем страницу index (еще раз скажу что в файле make-page я закоментил
вызов uglifyjs, так как он у меня не работал):


$ ./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

В папке bempress/pages/index/ появилось 2 файла index.bemdecl.js и
index.deps.js, а так же в папке wp-content/themes/yac/ появилось много
файлов.

index.php содержит в себе всю html часть, которая содержится в файлах
header.php, content.php и footer.php и в моем случае выглядит так:


header
content
footer

А файл style.css содержит в себе пожатый css и выглядит так:


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

Можно поиграться поменять php и css файлы, а потом пересобрать страницу
index и насладится результатом.

Так же очень просто создать еще одну страницу.


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

Это команда создает пустой файл pages/404/404.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

Пишем туда нечто похожее на index страницу:


({
    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

Файл wp-content/themes/yac/404.php выглядит вполне ожидаемо:


header
footer

На этом этот подход к BEM для меня закончился. На github есть небольшая
библиотека блоков и в следующем подходе я планирую подключить эту библиотеку
к этому мега проекту, но пока мне совсем непонятно как это делать.

Спасибо что дочитали до этого места =)

Реализация и использование блока i-jquery

Mon, 24 Oct 2011 17:45:50 +0400

Блок i-jquery помогает подключить jQuery на страницу и упорядочивает хранение js-кода плагинов.

На уровне blocks-common блок i-jquery состоит из нескольких элементов, которые содержат плагины к jQuery. Декларация этих элементов обеспечивает подключение этих плагинов в страничный js.
Более подробно об этих элементах можно посмотреть в блоке github.com/.../i-jquery.

На уровне blocks-desktop есть дополнительный элемент core.

BEMHTML-реализация этого элемента позволяет подключать на страницы нужную версию библиотеки jQuery.

({
    block: 'b-page',
    title: 'Страница про ссылку',
    head: [
        ...
        { block: 'i-jquery', elem: 'core' },
        ...
    ],

Таким образом, для того, чтобы поддерживаемая версия jQuery оказалась на страницах, нужно использовать такой bemjson:

({
 block: 'b-page',
 title: 'Страница про ссылку',
 head: [
 ...
 { block: 'i-jquery', elem: 'core' },
 ...
 ],

Этот шаблон не продуцирует DOM-представление элемента. Он декларирует использование на странице элемента js, блока b-page, подключающего js с jQuery.

Если мы решим перейти на новую версию библиотеки, просто изменим этот шаблон. И тогда у всех проектов, подключавших jQuery не вручную, а через блок i-jquery, своевременно изменится версия.

Можно перезаписать этот шаблон bemhtml-шаблоном на своём уровне переопределения (для всего проекта или только для некоторых страниц). В этом случае, используя те же самые входные данные, можно получать более подходящий проекту результат.
В директории элемента core в виде кода модификаторов элемента размещены совместимые с библиотекой версии jQuery в минимизированном состоянии. При помощи переопределения bemhtml-шаблона такими файлами можно пользоваться для оффлайн-разработки:

block i-jquery, elem core, default: {
    local(
        this._mode = '',
        this.ctx = {
            block: 'b-page',
            elem: 'js',
            url: '/bem-bl/blocks-desktop/i-jquery/__core/_version/i-jquery__core_version_1.6.2.js'
        }
    ) this.apply()
}

Использование и реализация блока b-layout-table

Fri, 21 Oct 2011 14:10:57 +0400

Блок b-layout-table — таблица со 100% шириной, для создания раскладки.

BEMHTML шаблон блока выводит таблицу, строки и ячейки со всеми необходимыми атрибутами.

block b-layout-table {
    tag: 'table'
    elem row, tag: 'tr'
    this.elem === 'cell' || this.elem === 'gap' {
        tag: 'td'
        attrs: {

            var ctx = this.ctx,
                a = {},
                props = ['colspan', 'rowspan'], p;

            while(p = props.shift()) ctx[p] && (a[p] = ctx[p]);

            return a;
        }
    }
}

Ячейки блока могут быть представлены либо елементом cell, либо элементом gap.
Элемент cell предназначен для вложения контента, а элемент gap служит распоркой.

Давайте рассмотрим BEMJSON блока:

{
    block: 'b-layout-table',
    mods: { layout: '58-40'},
    content: [
        {
            elem: 'row',
            content: [
                {
                    elem: 'gap',
                    rowspan: '2'
                },
                {
                    elem: 'cell',
                    content: {
                        elem: 'inner',
                        content: 'Left cell'
                    }
                },
                {
                    elem: 'cell',
                    elemMods: { position: 'r'},
                    content: 'Right cell'
                }
            ]
        },
        {
            elem: 'row',
            content: [
                {
                    elem: 'cell',
                    colspan: '2',
                    content: 'Second row and one cell'
                }
            ]
        }
    ]
}

По умолчанию в блоке не задаются ширины ячейкам. Доопределить блок своими стилями можно следующим образом: добавляем модификатор блоку — mods: { layout: '58-40'} и ячейке — elemMods: { position: 'r'}.
Элементом inner оборачиваем контент ячеек, что позволяет задать нужные нам отступы. Далее, используя каскад, задаем нужные нам CSS свойства.

Вот такой CSS получится к BEMJSON, приведенному выше:

.b-layout-table_layout_58-40 .b-layout-table__cell_position_r
{
    width: 40%;
}

.b-layout-table_layout_58-40 .b-layout-table__gap
{
    width: 2%;
    padding-left: 20px;
}

.b-layout-table_layout_58-40 .b-layout-table__inner
{
    margin-right: 0.8em;
}

Обратите внимание, что нельзя задавать самому блоку никаких дополнительных CSS свойств, это может привести к конфликтам в верстке, так как блок может быть использован в реализации других блоков.

Важно: использовать блок нужно, задавая ему модификатор или миксируя его с другим блоком/элементом.

Материалы мастер-классов по БЭМ с YAC2011 на Vimeo

Thu, 20 Oct 2011 11:12:57 +0400

Видео мастер-классов про БЭМ, проходивших в 3м Зале на конференции YAC 2011, выложены на Vimeo. Можно смотреть на iOS: через браузер и через приложение.

Владимир Гриненко. Тема для WordPress в БЭМ.
http://vimeo.com/30838628
Лена Глухова, Варя Степанова. Дом из готовых кирпичей. Использование библиотеки bem-bl.
http://vimeo.com/30819387
Сергей Бережной. BEMHTML. Not yet another шаблонизатор.
http://vimeo.com/30814503
Варя Степанова. JavaScript в БЭМ-терминах.
http://vimeo.com/30817887

Видео доклада "BEMHTML. Not yet another шаблонизатор" (Питер)

Wed, 19 Oct 2011 16:51:44 +0400

Видео доклада "BEMHTML. Not yet another шаблонизатор" со встречи разработчиков в Политехе (Питер).

Материал аналогичен одноимённому докладу на конференции YAC2011, но отличается большой секцией вопросов и ответов.

Это же видео опубликовано в коллекции БЭМ на Яндекс.Видео.

Видео мастер-класса "JavaScript в БЭМ-терминах" (Питер)

Wed, 19 Oct 2011 16:33:33 +0400

Видео мастер-класса "JavaScript в БЭМ-терминах" со встречи разработчиков в Политехе (Питер).

Материал аналогичен одноимённому мастер-классу с YAC2011, но секция вопросов, естественно, отличается.

Для целостности коллекции такой же материал опубликован на Яндекс.Видео.

Использование и реализация блока i-ua

Mon, 17 Oct 2011 14:36:39 +0400

Блок i-ua — служебный, у него нет визуального представления на странице. (Название блока — это аббревиатура от User Agent, и к Украине отношения не имеет).

Этот блок используется всегда, когда используется блок b-page, так как вызывается внутри него. Задавать его самостоятельно на странице не нужно.

В HTML блок представлен в виде инлайнового скрипта, что обеспечивается следующим bemhtml-шаблоном:

block i-ua {
    tag: 'script',
    bem: false,
    content: [
                ';(function(d,e,c,r){',
                    'e=d.documentElement;',
                    'c="className";',
                    'r="replace";',
                    'e[c]=e[c][r]("i-ua_js_no","i-ua_js_yes");',
                    'if(d.compatMode!="CSS1Compat")',
                    'e[c]=e[c][r]("i-ua_css_standard","i-ua_css_quirks")',
                '})(document);'
            ].join('')
}

В результате работы такого JS у тега html появляются CSS-классы, идентифицирующие, включен ли JS и в каком режиме рендеринга находится браузер.
Эти классы можно использовать, чтобы при помощи CSS задавать блокам разный внешний вид в зависимости от ситуации. Например, блоки из bem-bl ориентируются (будут ориентироваться) на эти классы в своей работе.

Если такие классы проекту не нужны, можно переопределить блок i-ua на уровне переопределения проекта:

block i-ua, tag: ''

Использование блока b-link

Thu, 13 Oct 2011 16:55:05 +0400

Блок b-link — это ссылка с различными модификаторами.

В простом случае для отображения блока необходимо задать следующий bemjson:

{
    block: 'b-link',
    url: 'http://company.yandex.ru',
    title: 'Click here!',
    target: '_blank',
    content: 'The best company all over the world'
}

Свойство url преобразуется в атрибут href. Свойства title и target — в соотвествующие атрибуты.
В результате получается такой HTML:

<a
    class="b-link"
    href="http://company.yandex.ru"
    title="Click here!" target="_blank">
        The best company all over the world
</a>

Все эти преобразования возможны благодаря bemhtml-шаблону блока:

block b-link {

    tag: 'a'

    attrs: {

        var ctx = this.ctx,
            a = { href: ctx.url },
            props = ['title', 'target'], p;

        while(p = props.shift()) ctx[p] && (a[p] = ctx[p]);

         return a;

    }

}

Шаблон по моде tag определяет тег блока — <a>.

Шаблон по моде attrs копирует контент свойств и передает атрибутам в HTML.

Модификатор — mods: { pseudo: 'yes' }

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

При наличии в bemjson у блока b-link свойства url HTML-тег блока следующий: <a href="...">...</a>
При отключенном js происходит переход по ссылке.

Чтобы использовать такую ссылку, нужно задать следующий bemjson:

{
    block: 'b-link',
    mods: { pseudo: 'yes' },
    url: 'http://ya.ru',
    content: 'Pseudo link'
}

Это даст следующий HTML:

<a
    class="b-link b-link_pseudo_yes i-bem"
    onclick="return {'b-link':{}}"
    href="http://ya.ru">
    <span class="b-link__inner">Pseudo link</span>
</a>

Ссылка без свойства url представлена в HTML тегом <span>.
В этом случае входные данные (bemjson) будут такими:

{
    block: 'b-link',
    mods: { pseudo: 'yes' },
    content: 'Псевдоспан'
}

<span
    class="b-link b-link_pseudo_yes i-bem"
    onclick="return {'b-link':{}}">
    <span class="b-link__inner">Псевдоспан</span>
</span>

bemhtml-шаблон для блока b-link с модификатором pseudo дополняет основной шаблон на b-link:

block b-link, this.mods.pseudo {

    tag: (this.ctx.url? 'a' : 'span')

    js: true

    attrs, !this.ctx.url: {
        return {}
    },

    content, !this.ctx._wrap, !this.mods.inner: {
        local(
            this._mode = '',
            this.ctx = {
                elem: 'inner',
                content: this.ctx.content,
                _wrap: true
            }
        ) this.apply();
    }
}

Шаблон по моде tag в зависимости от наличия свойства url устанавливает в качестве тега либо <a>, либо <span>.
Шаблон по моде js говорит о том, что у блока есть клиентский js.
Шаблон по моде attrs с дополнительным условием остутствия свойства url сбрасывает все атрибуты. Шаблон по моде content с дополнительными условиями — оборачивает контент псевдоссылки в элемент inner всегда, кроме случая, когда у блока есть модификатор inner.

Чтобы шаблон элемента inner был всегда у псевдоссылки, указываем зависимость в формате deps.js:

({
    shouldDeps: [
        {
            elems: 'inner'
        }
    ]
})

Секция shouldDeps подключает шаблоны на элемент inner после текущего блока.

Элемент — elem: 'inner'

Опциональный элемент. bemhtml-шаблон элемента inner для блока b-link.

block b-link, elem inner, tag: 'span'

Элемент inner представляется в HTML тегом <span>.

Модификатор — mods: { inner: 'yes' }

Позволяет добавлять в ссылку elem: 'inner'. Содержит только css, которые переносит подчеркивание с самой ссылки на ее внутренний элемент.

Описание блока с модификатором inner : yes в bemjson:

{
    block: 'b-link',
    mods: { inner: 'yes' },
    url: '#',
    content: [
        {
            block: 'b-icon',
            mix: [ { block: 'b-link', elem: 'icon'} ],
            url: 'http://yandex.st/lego/_/Kx6F6RQnQFitm0qRxX7vpvfP0K0.png',
            alt: 'Иконка Серпа'
        },
        {
            elem: 'inner',
            content: 'Ссылка с иконкой'
        }
    ]
}

Элемент inner в формате bemjson может возникнуть только у ссылки с модификатором inner : yes, поэтому для данного модификатора указываем зависимость в формате deps.js так же, как для модификатора pseudo: 'yes'.

Одновременное использование модификаторов — mods: { pseudo: 'yes', inner: 'yes' }

Позволяет указывать элемент inner для псевдоссылки. Пример в формате bemjson:

{
    block: 'b-link',
    mods: { pseudo: 'yes', inner: 'yes' },
    url: 'http://ya.ru',
    content: [
        {
            block: 'b-icon',
            mix: [ { block: 'b-link', elem: 'icon'} ],
            url: 'http://yandex.st/lego/_/Kx6F6RQnQFitm0qRxX7vpvfP0K0.png',
            alt: 'Иконка Серпа'
        },
        {
            elem: 'inner',
            content: 'Псевдо-ссылка с иконкой'
        }
    ]
}

<a
    class="b-link b-link_pseudo_yes b-link_inner_yes i-bem"
    onclick="return {'b-link':{}}"
    href="http://ya.ru">
        <img
            class="b-icon b-link__icon"
            src="http://yandex.st/lego/_/Kx6F6RQnQFitm0qRxX7vpvfP0K0.png"
            alt="Иконка Серпа"/>
        <span class="b-link__inner">Псевдо-ссылка с иконкой</span>
</a>

Модификатор — mods: { disabled: 'yes' }

Неактивная ссылка или неактивная псевдоссылка.

js реализация блока

В техногии js реализовано поведение блока с модификатором pseudo : yes: github.com/.../b-link_pseudo_yes.js

Код написан под ядро клиентского js библиотеки блоков, реализованное в блоке i-bem. (bem.github.com/.../i-bem.ru.html)

Поведение блока описывается декларативно путём передачи параметров в метод BEM.DOM.decl.

Первый параметр - js-хеш, описывающий, к каким блокам должна быть применена данная js-реализация:

BEM.DOM.decl({'name': 'b-link', 'modName': 'pseudo', 'modVal': 'yes'}, {
...

В данном случае указано, что это js-поведение определено для блока b-link с модификатором pseudo в значении yes.
Первым параметром метода также может быть строка с именем блока, если сообщать modName и modVal не нужно.

Второй параметр метода запрашивает хеш динамических методов и свойств блока. В данном случае это только один метод _onClick:

_onClick : function(e) {

    e.preventDefault();

    this.hasMod('disabled', 'yes') || this.afterCurrentEvent(function() {
        this.trigger('click');
    });

}

_onClick() триггерит BEM-событие click на js-объекте блока. Это происходит только для активных ссылок (без модификатора disabled : yes) и в следующем потоке исполнения, для чего используется хелпер afterCurrentEvent.

Третий параметр в декларации блока — хеш статических методов и свойств. В данном случае определён зарезервированный статический метод live(), используемый для отложенной инициализации блоков.
В методе live() можно вызывать методы-хелперы для различных типов live-инициализации блока. В данном случае использован метод liveBindTo, позволяющий реагировать на DOM-событие определённого блока.

Видео мастер-класса "JavaScript в БЭМ-терминах"

Tue, 11 Oct 2011 15:41:57 +0400

Мастер-класс "JavaScript в БЭМ-терминах" прошёл на YAC2011 19 сентября 2011. В ходе этого мастер-класса Варя Степанова показывает, как при помощи JavaScript-ядра библиотеки bem-bl писать клиентский JavaScript для страниц, созданных по БЭМ-методу.
Плееры с выступлением и слайдами опубликованы на сайте YAC: http://yac2011.yandex.ru/archive2011/video3/#i-bem

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

И скачать слайды: http://www.slideshare.net/VarvaraStepanova/javascript-9641142/download

Видео доклада "BEMHTML. Not yet another шаблонизатор"

Tue, 11 Oct 2011 15:35:52 +0400

Опубликовано видео доклада Сергея Бережного "BEMHTML. Not yet another шаблонизатор". В ходе этого доклада Сергей рассказывает о том, чем шаблонизатор BEMHTML отличается от сотен других шаблонизаторов и почему мы используем именно его.
Видео выступления и слайды опубликовано на сайте YAC2011: http://yac2011.yandex.ru/archive2011/video3/#bemhtml

Можно посмотреть видео прямо здесь:

И скачать слайды: http://www.slideshare.net/VarvaraStepanova/bemhtml/download

Видео мастер-класса "Дом из готовых кирпичей. Использованеи библиотеки bem-bl"

Tue, 11 Oct 2011 15:31:00 +0400

Мастер-класс "Дом из готовых кирпичей. Использование библотеки bem-bl" прошёл на YAC2011 19 сентября 2011. В ходе мастер-класса показано, как установить и использовать БЭМ-инструменты (bem-tools) и как собрать страницу на библиотеке блоков bem-bl. Мастер-класс проводили Лена Глухова и Варя Степанова.

Плееры с выступлением и слайдами опубликованы на сайте YAC: http://yac2011.yandex.ru/archive2011/video3/#bem-dom

Можно также посмотреть видео прямо тут:

И скачать слайды: http://www.slideshare.net/VarvaraStepanova/bembl/download

Видео мастер-класса "Тема для WordPress в БЭМ"

Tue, 11 Oct 2011 15:26:20 +0400

Мастер-класс Владимира Гриненко "Тема для WordPress в БЭМ" на YAC2011 19 сентяря 2011. В ходе мастер-класса показано, как применить БЭМ-методологию к сайту PHP (в частности, на WordPress).

По ссылке — видео выступления и слайды: http://yac2011.yandex.ru/archive2011/video3/#wordpress-bem

Видео можно также посмотреть прямо тут:

И скачать слайды: http://www.slideshare.net/VarvaraStepanova/wordpress-9641370/download

Видео мастер-классов по БЭМ c YAC2011

Tue, 11 Oct 2011 13:32:18 +0400

На сайте YAC выложены видео докладов и презентаций мастер-классов по БЭМ:

http://yac2011.yandex.ru/archive2011/video3/

Презентации в формате PDF можно скачать отдельно:

Тема для WordPress в БЭМ
http://clubs.ya.ru/bem/replies.xml?item_no=1151
Дом из готовых кирпичей. Использование библиотеки bem-bl
http://clubs.ya.ru/bem/replies.xml?item_no=1152
Шаблонизатор BEMHTML
http://clubs.ya.ru/bem/replies.xml?item_no=1153
JavaScript в БЭМ терминах
http://clubs.ya.ru/bem/replies.xml?item_no=1154

PS: Видео опубликованы в разных постах, комменты к этому посту отключены, комментируйте каждый мастер-класс в его посте.

YaC'2011: доклад Вегеда «Истории про разработку сайтов»

Tue, 11 Oct 2011 12:58:17 +0400

Рекомендую посмотреть доклад Вегед «Истории про разработку сайтов» с YaC'2011

Слайды

Документация о js-реализациях в bem-bl

Tue, 11 Oct 2011 11:11:51 +0400

Структура блока первична, а реализация вторична.

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

Чтобы в клиентском JS работать в терминах Блок-Элемент-Модификатор, в блоке-хелпере i-bem сделано ядро JS-представления блоков. Несколькими постами ранее был опубликован видео-доклад «i-bem.js — javascript блок, помогающий-делать-другие-блоки» Дмитрия Филатова и Сергея Бережного на пЯТЬнице Яндекса 22.04.2011: http://clubs.ya.ru/bem/replies.xml?item_no=900

Теперь доступна документация о JS-реализации блока: http://bem.github.com/bem-bl/sets/common-desktop/i-bem/i-bem.ru.html.

Примеры js-реализации блоков находятся в репозитории бибилиотеки: .../blocks-desktop/i-bem/examples.
По мере публикации документации о блоках мы также будем подробно описывать то, как они запрограммированы. Читайте о JS-реализации блоков в следующих постах.

На тему написания JavaScript по БЭМ-методу у нас был мастер-класс на YAC-2011. Теперь его можно посмотреть на видео: http://yac2011.yandex.ru/archive2011/video3/ (последний плеер).