BEM Syntax with Sass

UPDATE: Updated before it’s even published, but last night I found out that with updates before Sass 3.3.0 you can now just us & in front of the last part of the selector and it will work the same as the @at-root directive. Code snippets below have been updated to use this method.

At Big Swing we’ve adopted the BEM naming methodology for all of our CSS, and Sass as our CSS pre-processor. The problem I was running into as we started writing Sass is that I wanted to take advantage of Sass’ nesting feature. With BEM one of the goals is to nest as little as possible, so I was writing code like this.

Luckily in Sass 3.3.0 they’ve added the @at-root directive which takes CSS rules that it’s in front of or wrapped around and moves them to the root of the stylesheet. Which allows me to write my scss with better context, and allows for easier changing of object names.


I have some snippets for Sublime Text below that allow you to generate your selectors more easily.