jQuery.BEM — декларативный подход к работе с версткой по БЭМ методу

a94bd5c42f22a951b11a22206fde4289Уже много всего сказано про БЭМ, чем он хорош, чем плох, и повторяться сегодня мы не будем. Ниже рассказ про то, как работать с БЭМ DOM из jQuery в небольших проектах, где совесть и время не позволяют прикрутить bem-tools, bem-bl и bemhtml, а поработать с удобной системой верстки все-же хочется, оставив позади длинные селекторы в js файлах.

Заинтересованных приглашаю под кат, за подробностями и примерами использования.

Методология

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

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

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

Зачем еще одна реализация?

Не сказать что подобных штуковин так уж и много, единственный близкий аналог — фреймворк i-bem из библиотеки bem-bl, но заставить его работать вне родной среды обитания будет довольно проблематично.

Яндексовские bem-tools, bem-bl и вся возня со сборщиками и шаблонизаторами это, несомненно, круто. Но пока мы не доросли до проектов, имеющих пару сотен шаблонов, все это будет скорее мешать. Предположим, под рукой мы имеем маленький интернет-магазинчик, на каком-нибудь легеньком PHP-фреймворке. Здесь все это — стрельба из пушки по воробьям, однако рядом всегда будет любимый заказчик, которому все время приспичит что-нибудь поменять.

Методология уже хорошо зарекомендовала себя в удобстве масштабирования, а jQuery.BEM является лучшей возможностью работать с БЭМ версткой из JavaScript без применения толстых, сложных технологий. Все что нужно это jQuery, плагин jQuery.BEM и страничка сверстанная по БЭМ методу.

Я не утверждаю, что jQuery.BEM — самая лучшая реализация сего действа, она вполне себе может проигрывать в производительности тому-же i-bem из за сложных путешествий по DOM, но зато искоробочная и, на данный момент, самая удобная.

Работа с элементами

Предположим, у нас есть несколько блоков с товарами:

<div class="b-product">
    <div class="b-product__name">Coffe</div>
    <div class="b-product__price">$2</div>
</div>
<div class="b-product">
    <div class="b-product__name">Tea</div>
    <div class="b-product__price">$1</div>
</div>

 

Нам нужно произвести какое-либо действие с дочерними элементами первого блока:

$('.b-product').first().children('.b-product__name'); // jQuery
$('.b-product').first().elem('name');                 // jQuery.BEM

 

С jQuery.BEM запись вышла короче. Разница в пару байт это, конечно, сомнительное приемущество, но в продакшене .elem() облегчает жизнь, если блок, например, нужно внезапно переименовать.

Работа с модификаторами

Добавляем модификатор
<div class="b-product">...</div>

 

 

$('.b-product').setMod('theme', 'premium'); // получим .b-product.b-product_theme_premium
$('.b-product').setMod('premium');          // получим .b-product.b-product_premium_yes

 

Удаляем модификатор
<div class="b-product b-product_theme_premium">...</div>

 

$('.b-product').delMod('theme', 'discount'); // несуществующий модификатор - ничего не изменится .b-product.b-product_theme_premium
$('.b-product').delMod('theme', 'premium');  // снесет класс .b-product_theme_premium
$('.b-product').delMod('theme');             // снесет модификатор theme с любым значением

 

Получаем модификатор
<div class="b-product b-product_theme_premium">...</div>

 

$('.b-product').getMod('theme');    // вернет "premium"
$('.b-product').getMod('discount'); // вернет null
Проверяем модификатор
<div class="b-product b-product_theme_premium">...</div>

 

$('.b-product').hasMod('theme');             // true
$('.b-product').hasMod('theme', 'premium');  // true
$('.b-product').hasMod('theme', 'discount'); // false
Фильтруем блоки по модификатору
<div class="b-product b-product_theme_premium">...</div>
<div class="b-product">...</div>

 

 

$('.b-product').byMod('theme', 'premium'); // вместо $('.b-product.b-product_theme_premium')
$('.b-product').byMod('theme');            // вместо $('.b-product.b-product_theme_premium')
$('.b-product').byNotMod('theme');         // вместо $('.b-product').not('.b-product_theme_premium')

 

Декларации блоков

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

bem.decl('b-product', {
    onInit: function($this) {
        // Добавляем элементу price модификатор size со значением large как только DOM будет готов
        // $this внутри функии — обычный jQuery объект
        $this.elem('price').setMod('size', 'large');
    },
    title: {
        onMouseover: function($this) {
            // Добавляем блоку b-product модификатор state со значением hover
            $this.up().setMod('state', 'hover');

            // Вызываем какую-нибудь вспомогательную функцию
            this._customFunction();
        },
        _customFunction: function() {
            console.log('I am helper function');
        }
    },
    price: {
        onSetmod: function($this, e, modKey, modVal) {
            // Выводим в консоль информацию об установленном модификаторе элементу price
            console.log('Modifer set:', modKey, modVal);
        },
        onDelmod($this, e, modKey, modVal) {
            //
        }
    }
});

 

Можно декларировать только блоки или элементы с определенными модификаторами, а так же отдельные элементы блока:

bem.decl({ block: 'b-product', mod: 'theme:premium'}, {
    //
});

bem.decl({ block: 'b-product', elem: 'price' }, {
    //
});

 

Все события являются всплывающими и вешаются на document методом $(document).on(…), так что переопределять декларации, при изменении DOM на стороне клиента, не нужно.

Блоки могут общаться между собой событиями, функция начинающаяся с «on…», вешает на объект обработчик, так что в любом месте можно сделать $(‘.b-block’).elem(‘title’).trigger(‘on…’);

Переопределение синтаксиса

По умолчанию, синтаксические параметры следуют оригинальному БЭМ. Если нужно избавиться от необходимости использования префиксов (b-, l-, g-, etc) или изменить разделитель блока и элемента с «__» на что-нибудь более удобное, используйте:

bem.setConfig({
    namePrefix: '',     // Префикс блока, можно регуляркой
    elemPrefix: '-',    // Префикс элемента
    modPrefix: '_',     // Префикс модификатора
    modDlmtr: '-'       // Разделитель модификатора и значения
});

 

Теперь имена классов в нашем HTML должны выглядеть немного по другому.

.block
.block-element
.block-element_modifer-value

 

В заключение

Плагин, на условиях лицензии MIT, доступен на GitHub. Буду рад, если он кому-нибудь облегчит жизнь и принесет пользу.