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.
apm install bem-tools
Default shortcut: ctrl+alt+b
.
All the commands are also available with context menu.
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>
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.