bemto — БЭМ-миксины для шаблонизатора Jade

Форум /

На досуге написал несколько миксинов для Jade, позволяющие фигачить всякое в БЭМ-нотации. По ссылке — короткое описание миксинов, сам код и документацию можно найти на Гитхабе: https://github.com/kizu/bemto/

Если кто-то пользуется Jade (или хочет попробовать — он удобен для быстрого написания всяких статичных страничек, например), то, надеюсь, эти миксины ему пригодятся )

В частности, bemto позволяет писать примерно такой код:

mixin link(url)
  +b('span').link(attributes, href=url)
    block

+link('#Foo') Foo

+link('https://github.com')._external Github

+link('http://kizu.ru').url(rel="me") Here I am

+link Ah, I'm not a link

+link('https://github.com')
  +e.icon(src="http://favicon.yandex.net/favicon/github.com")
  +e.text Github

который развернётся в такой HTML:

<a class="link" href="#Foo">Foo</a>

<a class="link link_external" href="https://github.com">Github</a>

<a class="link url" href="http://kizu.ru" rel="me">Here I am</a>

<span class="link">Ah, I'm not a link</span>

<a class="link" href="https://github.com">
  <img alt=" class="link__icon" src="http://favicon.yandex.net/favicon/github.com"/>
  <span class="link__text">Github</span>
</a>

voischev-ivan

А нет мыслей пока, как собрать шаблоны написанные например на Блитс?

davydov-mikhail

Глянул код - очень большой размах. Нужно проще и не забываем о производительности да и нужно беречь руки пользователя от кучи 'span' По сути b и e это одно и то же e только делает лукап родительского блока. И можно обойтись без нее.

mixin b_(tag)
    -var classNames = attributes.class,
    -    blockName = classNames.split(' ', 1);
    -tag = tag || 'div';
    -attributes.class = classNames.replace(/\s_/g, ' ' + blockName + '_');
    #{tag}(attributes): block

// Хэлперы
-var span = 'span';

.p-pewpew #{self.ololo}
    +b_.p-pewpew._item_prpre._color_red.i-bem
        +b_(span)(title-id="dq").p-pewpew__item._color_red.i-bem-class-dddwdw dqdq

kizmarh

1. Про производительность — я это использую чисто для сборки статики, подозреваю, что в продакшне оно вполне себе может производительность подсаживать, да

2. Про имена тегов у меня есть несколько задумок о том, как это всё дело упростить (скажем, создать миксины +span, +li и т.д., которые будут просто шорткатами к соответствующим +b с тегом).

3. Да, e — просто шорткат.