Технологии реализации

BEM-метод подразумевает реализацию блока в различных технологиях.

TODO: нарисовать картинку с уровнями переопределения и технологиями

HTML

Реализация возможна в нескольких вариантах.

http://clubs.ya.ru/bem/replies.xml?item_no=712

Тэги HTML и классы

TODO

Кастомные тэги

TODO

CSS

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

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

Важно: CSS-свойства не описываются через id, а именно вот так НЕ ПИШЕМ:

#header {}

CSS-классы для BEM-сущностей соответствуют полным именам этих сущностей.
См. соглашение об именовании

Примеры CSS-классов

.b-popup {}                 // CSS-класс блока
.b-popup__content {}        // CSS-класс элемента блока
.b-popupa_theme_yellow {}   // CSS-класс модификатора блока

По возможности отказываемся от Селекторов типа.
Селекторы типа — селекторы, которые применяются к DOM-узлам без CSS-класса (элементо-зависимые селекторы).

Например, вот так НЕ ПИШЕМ:

p
{
      color: #ccc;
}

table.news td
{
   border-bottom: 1px solid #ccc;
}

.list li
{
    float: left;
}

Отказ от использования Селекторов типа и CSS-каскада уменьшает Reflow Time — чистое время наложения стилей на сформированный DOM.
TODO: Приложить ссылку на исследования.

JavaScript

В JS мы также работаем в терминах "Блок-Элемент-Модификатор". DOM-представление блоков рассматривается как более низкий уровень реализации.
Допустимы блоки без DOM-представления. Обычно это блоки-хелперы.

Пример блоков без DOM-представления:

i-request                // Конструктор запросов
i-request_type_ajax      //Конструктор AJAX-запросов

TODO: Подготовить i-bem к релизу.

Шаблоны

TODO: Подготовить bemhtml