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

Pug-like code to HTML/SCSS

Pug-like code to BEMJSON

HTML to BEMJSON

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>  

---

Pseudocode

spaceship
  a.section*3 CONTENT

Turns to HTML

<div class="spaceship">
  <a class="spaceship__section" href="#">CONTENT</a>
  <a class="spaceship__section" href="#">CONTENT</a>
  <a class="spaceship__section" href="#">CONTENT</a>
</div>