HTML preprocessor for BEM
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
utils
.gitignore
.npmignore
.travis.yml
README.md
README.ru.md
beml.js
index.js
package.json

README.md

BEML Build Status

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

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

translated to

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

How to use

var beml = require('beml');

var config = {
  elemPrefix: '__',
  modPrefix: '_',
  modDlmtr: '_'
};

var html = beml('<div block="b-block" mod="size:big"></div>', config);
console.log(html);

Syntax reference

Blocks

<div block="animals">
  <div block="unicorn"></div>
</div>
<div class="animals">
  <div class="unicorn"></div>
</div>

Elements

<div block="animals">
  <div elem="item">
    <div elem="item-name"></div>
  </div>
</div>
<div class="animals">
  <div class="animals__item">
    <div class="animals__item-name"></div>
  </div>
</div>

Modifiers

<div block="animals">
  <div block="unicorn" mod="size:large, female"></div>
</div>
<div class="animals">
  <div class="unicorn inicorn_size_large unicorn_female"></div>
</div>

Mixes

<div block="animals">
  <div elem="item" mix="block:unicorn, mod: [large, female]">
    <div block="unicorn" elem="photo"></div>
    <div elem="item-name"></div>
  </div>
</div>
<div class="animals">
  <div class="animals__item unicorn unicorn_large unicorn_female">
    <div class="unicorn__photo"></div>
    <div class="animals__item-name"></div>
  </div>
</div>

For complex values you can use pseudo JSON syntax:

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