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.

Abnormal media query handling in Fire Fox

As of CSS 2.1 you can target your css at specific media conditions, but Firefox seems to handle them strangely. It includes the visible vertical scroll bar in the calculation of the width instead of the actual display width itself. This means that while javascript may return one value for screen width your media queries will receive a different value.

The above image uses a stylesheet with this media query

When javascript returns a window width of 890 the media query receives a value of somewhere around 907, and the styles aren’t applied until the window width is actually 873

Firefox is actually following the W3C specification for CSS2.1 when it does this.

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

This seems like a strange way to handle a query for the window’s display width since to me the scroll bar is not part of the display area. It also makes it harder for designers/developers because scrolbars are sized inconsistantly across operating systems. There is a difference in how this works between my Macbook and my windows desktop. The action that makes more sense to me is how webkit browsers handle this. @media receives the visible with of the browser excluding the scroll bar making things consistent.

There is another odity in Firefox’s handling of width values in @media. On some pages it seems to function like webkit where it renders using the visible content area without the scroll bar. I created some simple test file with this css one file includes it inline and one links to it.

And things function as expected. The media queries are passed the width of the visible screen.

Granted the two sites are very different but so is the behavior.