Awesome BEM

Tools, sites, articles about BEM (frontend development method)

Articles

• MindBEMding – getting your head ’round BEM syntax
• CSS guidelines
• BEM methodology for small projects
• BEM It! for Brandwatch
• Used and Abused – CSS Inheritance and Our Misuse of the Cascade.
• Objects in Space — A style-guide for modular SASS development using SMACSS and BEM
• How to Scale and Maintain Legacy CSS with Sass and SMACSS
• Building a modular My Health Skills with BEM and Sass

Tools

Building

• enb – build system with lots of bundled plugins and complex dependency system.
• kabem - quick scaffolding and tweaking of HTML with BEM CSS.
• gulp-bem – build helpers for working with layers, dependencies and blocks.
• gulp-bem-pack – pack JavaScript files with layers support.

JQuery plugins

• jquery-bem
• jquery-bemhelpers

Layers

These layers does not rely on building system you use. They often contain CSS files, that written in BEM methodology and templates to generate HTML.

• bem-bootstrap – Bootstrap framework.
• csswizardry-grids – simple, fluid, nestable, flexible, Sass-based, responsive grid system.

Template engines

• bemto – mixins for writing BEM-style code for Jade.
• beml – super simple HTML postprocessor to handle BEM.
• bh – declarative BEMJSON to HTML processor.