#JADE BEM

Расширение шаблонизатора Jade для поддержки методологии БЭМ для разработки фронтенда.

##Описание

Вся работа расширения построена на 3-х миксинах:

• mixin b_(tag, ext) Миксин +b_ добавляет указанный за ним первый в цепочке класс в стек БЭМ блоков. Так же он добавляет этот класс в классы html элемента.

• mixin b_pop Миксин +b_pop извлекает из стека БЭМ блоков первый элемент.

• mixin e_(tag, ext) Миксин e_ берет верхний элемент из стека блоков и конкатенирует блок с первым классом в цепочке классов.

Миксины b_ и e_ проходятся по цепочки классов и берут классы, которые начинаются с нижнего подчеркивания, например, _mod_val, считая это классами модификаторов.

Вы можете определить тег внутри скобок (). При этом Вы можете не использовать "" тк. теги определены в файле shortcuts/common.jade в качастве переменных. Те. в можете писать, как +b(span), так и +b("span").

Помимо этого можно указать классы в аргументах миксинов b_ и e_ - tag и ext, разделяя их через символ вертикальной черты "|". Первым элементом для обоих параметров должен быть тег. При этом, если указаны оба параметра, то html тег берется из первого, классы берутся со второго. Эти классы будут добавлены в конец списка классов, что позволит переопределить их в классах, которые основаны на методологии БЭМ. Это в свою очередь позволяет расширять существующие css фреймворки.

##Установка и использование

Приведенный ниже список действий носит рекомендательный характер. Вы можете не придерживаться этих рекомендаций.

1. Сделайте форк этого репозитория.
2. Подключите его (форк) как гит сабмодуль к проекту в директорию шаблонов.
3. Затем, после того, как вы напишите свои shortcuts, "запушьте" изменения в свой форк, и для того, чтобы, например, написать свои shortcuts или сделать pull request в этот репозиторий.

##Примеры

Рассмотрим простой пример:

+b_.greeting
  +e_(span).username._mod_val.simple-class !{username}
  +b_.goodbye
    +e_(button).logout Logout
  +b_pop
+b_pop

В итоге получаем верстку:

<div class="greeting">
  <span class="greeting__username greeting__username_mod_val simple-class">
    !{username}</span>
  <div class="goodbye">
    <button class="goodbye__logout">Logout</button></div>
</div>

##Shortcuts

Чтобы использовать shortcuts для своего фреймворка (например, bootstrap), нужно добавить файл из папки shortcuts текущего репозитория. Если для css фреймфорка, который Вы используете нет shortcuts, то просто напишите их ;). Я настоятельно рекомендую использовать shortcuts вместо того, чтобы писать классы, относящиеся к фреймворку, в конце цепочки классов, чтобы переопределить их своими, тк. использование shortcuts делает верстку чище. Можно конечно передовать непосредственно строки в аргументы миксинов b_ и e_, но это дополнительная писанина.

без ипользования shortcuts

mixin layout(header, main, footer)
  +b_.chat-layout.container
    // layout header block
    +e_.header.row_fluid
      +e_(span).text.span12 I\m header
    ...
  +b_pop

с использованием shortcuts

include bem/bem
include bem/shortcuts/bootstrap
...
mixin layout(header, main, footer)
  +b_(bs.container).chat-layout
    // layout header block
    +e_(bs.row_fluid).header
      +e_(bs.span12) I\m header
    ...
  +b_pop