BEMHTML: шаблонизатор для БЭМ

BEMHTML — шаблонизатор (шаблонный движок) для тех, кто ведет веб-разработку в рамках БЭМ-методологии. BEMHTML — это:

• HTML-верстка в терминах блоков, элементов, модификаторов;
• поддержка CSS в стиле БЭМ;

BEMHTML: картина мира

Этот принцип не специфичен для веб-разработки и вряд ли вызовет возражения. Тем не менее, технологические особенности многих шаблонизаторов нередко вынуждают дублировать код. Это проявляется во всех ситуациях, когда один и тот же элемент интерфейса (например, кнопка) используется многократно. В большинстве шаблонизаторов HTML-код, описывающий кнопку, придется повторить на всех страницах, где она используется. Когда кнопку потребуется усложнить, разработчику придется отредактировать шаблоны всех страниц, где она присутствует. Даже если шаблонизатор позволяет вынести код кнопки в общую функцию, на всех страницах нужно будет заменить код кнопки вызовом этой функции.

Задача шаблонизатора: возможность создания гибких библиотек шаблонов.

«БЭМ головного мозга»

BEMHTML представляет собой распространение БЭМ-методологии на еще одну технологию — HTML. БЭМ предлагает дизайнеру, разработчику интерфейса, JavaScript-программисту работать в терминах единой предметной области — блоков, элементов, модификаторов. BEMHTML позволяет HTML-верстальщику присоединиться к ним.

Примеры

Данные (БЭМ-дерево), которые шаблонизатор принимает на вход:

{
  block: 'widgets',
  content: [
    {
      elem: 'weather',
      content: 4
    }
  ]
}