BEM Tools for Atom

Some handy tools to make developing BEM HTML code in Atom even more faster. It can convert BEM JSON, HTML, CSS/SCSS and some Pug-like code into each other.

Installing

apm install bem-tools

Show Usages

Default shortcut: ctrl+alt+b. All the commands are also available with context menu.

HTML to CSS/SCSS

HTML to CSS

Pug-like code to HTML/SCSS

Pseudocode to HTML/CSS

Pug-like code to BEMJSON

Pseudocode to BEMJSON

HTML to BEMJSON

HTML to BEM JSON

BEMJSON to HTML/SCSS

Some pug-like pseudocode cases

Pseudocode

spaceship
  cabin
    span.pilot--awake
    span.pilot--copilot--asleep
  cargo

Turns to HTML

<div class="spaceship">
  <div class="spaceship__cabin">
    <span class="spaceship__pilot spaceship__pilot--awake"></span>
    <span class="spaceship__pilot spaceship__pilot--copilot spaceship__pilot--asleep"></span>
  </div>
  <div class="spaceship__cargo"></div>
</div>