BEML

This is simple HTML preprocessor (or postprocessor) which extend HTML syntax for comfortable working with bem html.

Also available plugins for Gulp, Grunt, Broccoli and Postxml.

Why?

Raw HTML in BEM style is difficult to read. Also, I (and not only I) love HTML and don't want to use BEMHTML, BEMJSON and others specific technologies.

Targets

• Maximum simplicity - HTML syntax, without translate from another language.
• Possibility port to other languages (e.g. PHP or Python).
• Joint work with template engines.
• Ease of use.

Sample

<divblock="b-animals"><divelem="cat" mod="size:big, color:red"></div></div>

translated to

<divclass="b-animals"><divclass="b-animals__cat b-animals__cat_size_big b-animals__cat_color_red"></div></div>

How to use

varbeml=require('beml');varconfig={elemPrefix: '__',modPrefix: '_',modDlmtr: '_'};varhtml=beml('<div block="b-block" mod="size:big"></div>',config);console.log(html);

Syntax reference

Blocks

<divblock="animals"><divblock="unicorn"></div></div>

<divclass="animals"><divclass="unicorn"></div></div>

Elements

<divblock="animals"><divelem="item"><divelem="item-name"></div></div></div>

<divclass="animals"><divclass="animals__item"><divclass="animals__item-name"></div></div></div>

Modifiers

<divblock="animals"><divblock="unicorn" mod="size:large, female"></div></div>

<divclass="animals"><divclass="unicorn inicorn_size_large unicorn_female"></div></div>

Mixes

<divblock="animals"><divelem="item" mix="block:unicorn, mod: [large, female]"><divblock="unicorn" elem="photo"></div><divelem="item-name"></div></div></div>

<divclass="animals"><divclass="animals__item unicorn unicorn_large unicorn_female"><divclass="unicorn__photo"></div><divclass="animals__item-name"></div></div></div>

For complex values you can use pseudo JSON syntax:

<divblock="unicorn" mix="block:animals, elem:item, mod:{size:large,gender:female}"></div><divblock="unicorn" mix="{block:b-mix-1}, {block:b-mix-2, mod:[mod1, mod2]}"></div>

<divclass="unicorn animals__item animals__item_size_large animals__item_gender_female"></div><divclass="unicorn b-mix-1 b-mix-2 b-mix-2_mod1 b-mix-2_mod_2"></div>