Я работаю в команде (распределенная по нескольким городам, я в Великом Новгороде, программист в Питере) и для меня удобство всех участников стоит не на последнем месте.
Особо рады сервер-сайд программисты, когда видят верстку, в которой сразу ясно какие данные где отображаются (код www.nautilusdent.ru/):
<div class="person">
<div class="person__photo-wrap">
<img class="person__photo" src="/images/com_fwgallery/files/975/team1.png" alt="Александр Поболь">
</div>
<div class="person__title">
Александр Поболь
</div>
<div class="person__description">
Генеральный директор. Техник высшей категории. Награждён почётными грамотами и дипломами, отмечен грамотой министра здравоохранения.
<br>
Опыт работы с 1984 г.
</div>
<div class="person__link-to-all">
<a class="b-link" href="http://nautilusdent.ru/pobol-aleksandr.html">
Все работы
</a>
</div>
</div>
Я хочу оптимальным образом решать свои задачи — разрабатывать интерфейс так, чтобы не было мучительно больно.
bem-tools + BEMJSON, BEMHTML, i-bem.js решили мою задачу.
И, согласно разделению логики представления и данных, сделать соответствующий BEMHTML-шаблон:
(Понятие предиката в BEMHTML-шаблоне похоже по смыслу на селектор в CSS htmlbook.ru/test/selector)
/**
* Общий шаблон для блока 'menu'
*/
block('menu')(
tag()('ul'),
elem('item')(
tag()('li')
),
elem('link')(
tag()('a'),
attrs()(
{
href: this.ctx.url
}
)
)
)
/** Шаблон для блока 'menu' с учетом модификатора "активный" у вложенного элемента :
*
* "если блок содержит элемент 'item' с модификатором 'active',
* то установить у блока свойство '_active_item'
*
* @predicate block('menu').elem('item').elemMod('active', true)
*
*/
block('menu').elem('item').elemMod('active', true)(
/* в моде def (не путать с модификатором, мода -- правило генерации html)
* applyNext:
* установить свойство шаблона для блока _active_item равное true и
* применить следующий шаблон
*
* */
def()(
applyNext({_active_item: true}
)
)
)
/** Шаблон для блока 'menu' с установленным свойством '_active_item':
* для блока со свойством '_active_item' элемент 'link' генерировать через тег 'span'
*
* @predicate block('menu').match(this._active_item).elem('link').tag()
*/
block('menu').match(this._active_item).elem('link').tag()('span')
HTML — это ассемблер для веба. :)
Когда я верстал hunterboat.ru/ — дизайн менялся уже после сдачи макета, но мне не нужно было переколбашивать тонны html и
вручную разбираться в css-классах.
Вы напишите вместо b-networks__icon_small инлайн стиль типа width: 16px. Ок. А потом маленькая иконка станет шириной 15px — и в случае инлайна вас ждет жесткий find + replace all, в одном месте указать width: 15px не получится.
Возможно, интерфейс запутанный и слухи типа «Баба Соня вчера платила в банкомате, так он все деньги съел». Я-то ИТ-спец и то не всегда разумею в некоторых банкоматах.
Работаю в webStorm + virtualbox + bem server + пара вкладок chromium. Были тормоза с Unity. Понимаю, что тут дело не в unity как таковой, но все же она много памяти потребляет.
И никого не заставляю все бросить и пересесть на BEMJSON.
Суть моих комментариев в том, что многие разработчики критикуют не БЭМ, а свое представление о нем.
Посмотрите все посты про БЭМ выше — там про css. Я же говорю, что методология гораздо шире и вообще не про именование.
А вы работаете по принципу «наверстал и забыл»?
nautilusdent.ru/
hunterboat.ru/ (исходники github.com/alexbaumgertner/hunter-boat)
planetasid.ru/ (исходники github.com/alexbaumgertner/planeta-sid)
krechi-sila.narod.ru/ (исходники могу выложить сегодня)
zapravka-gaza.ru/ (+ вестка не по BEM от верстальщика, принявшего проект)
Особо рады сервер-сайд программисты, когда видят верстку, в которой сразу ясно какие данные где отображаются (код www.nautilusdent.ru/):
Про БЭМ ходит много легенд, многие, думая что он про именование css-классов немного ошибаются.
А препроцессоры лично я не употребляю по причине habrahabr.ru/post/203838/#comment_7035398
Я хочу оптимальным образом решать свои задачи — разрабатывать интерфейс так, чтобы не было мучительно больно.
bem-tools + BEMJSON, BEMHTML, i-bem.js решили мою задачу.
Очень рекомендую завтра (29 ноября) посмотреть трансляцию доклада Димы Кушникова tech.yandex.ru/events/bemup/spb-bemup/talks/1415/
github.com/alexbaumgertner/hunter-boat
И при этом это не в Яндексе или еще где, а в небольшой студии.
А BEMHTML согласен, на непривычный взгляд странно выглядит.
И, согласно разделению логики представления и данных, сделать соответствующий BEMHTML-шаблон:
(Понятие предиката в BEMHTML-шаблоне похоже по смыслу на селектор в CSS htmlbook.ru/test/selector)
И модификаторы являются индикаторами состояния, то есть css-класс button_disabled_yes не навешивается руками — это происходит в js-фреймворке i-bem ru.bem.info/libs/bem-core/1.0.0/i-bem.js/bem-js-main-terms/
Когда я верстал hunterboat.ru/ — дизайн менялся уже после сдачи макета, но мне не нужно было переколбашивать тонны html и
вручную разбираться в css-классах.
И более подробно в статье ru.bem.info/libs/bem-core/1.0.0/bemhtml/rationale/
Мы с девушкой приехали на 3 мес пожить в Будве