Уже много всего сказано про БЭМ, чем он хорош, чем плох, и повторяться сегодня мы не будем. Ниже рассказ про то, как работать с БЭМ 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-prouct_theme_premium
$('.b-product').setMod('premium'); // получим .b-product.b-product_premium_yes
Удаляем модификатор
<div class="b-product b-prouct_theme_premium">...</div>
$('.b-product').delMod('theme', 'discount'); // несуществующий модификатор - ничего не изменится .b-product.b-prouct_theme_premium
$('.b-product').delMod('theme', 'premium'); // снесет класс .b-prouct_theme_premium
$('.b-product').delMod('theme'); // снесет модификатор theme с любым значением
Получаем модификатор
<div class="b-product b-prouct_theme_premium">...</div>
$('.b-product').getMod('theme'); // вернет "premium"
$('.b-product').getMod('discount'); // вернет null
Проверяем модификатор
<div class="b-product b-prouct_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-prouct_theme_premium">...</div>
<div class="b-product">...</div>
$('.b-product').byMod('theme', 'premium'); // вместо $('.b-product.b-prouct_theme_premium')
$('.b-product').byMod('theme'); // вместо $('.b-product.b-prouct_theme_premium')
$('.b-product').byNotMod('theme'); // вместо $('.b-product').not('.b-prouct_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. Буду рад, если он кому-нибудь облегчит жизнь и принесет пользу. Всегда рад аргументированной критике и вопросам.
Автор: zenwalker
