Getting Sass-y with BEM

A BEM Refresher, Friendsies.

BEM is a class naming structure that helps organize an create modular CSS/Sass. It does so by following somewhat specific conventions. Some find these conventions redundant, but I find them extremely helpful to understanding the DOM. To understand what BEM is ( and my flaming passion for structure and guidelines) check out my previous article on why BEM is so great. As for this article, I am going to assume that you are fully versed in the BEM mentality. I am also going to assume you are well aware of the powers of SASS.

“BEM is dumb, and looks stupid” -meanies

A lot of people think BEM is redundant, with ugly and long class names. I can definitely understand where people are coming from when they are styling class names which feels bloated and overly descriptive. When it comes to Sass (if you are not sure how to use Sass to your advantage) BEM compiles ugly. Especially if you are nesting long BEM names inside of more long BEM names. This can quickly run into specificity issues and ridiculously long CSS declarations that become very frustrating.

This is what beginners to BEM might write their CSS/Sass like. Typing out entire class names, and having sore fingers that lead to cramps and distrust. I fully understand why this looks silly and redundant. Instead of re-using styles we are writing more and more styles for different(but similar) class names and repeating ourselves a whole lot.

Enter Sass, please.

&__whatever–active

With a couple handy selectors and operators in Sass we can do a lot to make BEM excel. One of the most important selectors is a fairly new addition to Sass, the ‘&‘ selector. This new Sass selector reference its parent from within the declaration. When nested the ‘&’ will grab the parent selector’s class. Because our class names follow really reliable patterns, we can use this to our advantage to create really readable code.

The above is an example of how BEM can be used with the ‘&‘ selector to create the visual bonus of nesting, without the specificity that comes along with nesting. When we use the ‘&’, it will compile completely descendant CSS selectors. This is really useful and will help with avoiding specificity conflicts in your CSS. However we still get the added bonus of the visual understanding that comes with nesting selectors in Sass.

@extend the powers that be

We can make further use of Sass-y BEM by using the @extend operator. In BEM methodology, you append a ‘modifier’ to the end of the class. When styling in plain CSS, this means you have to give an element two classes in the markup, like so;

The above situation can be super frustrating. Why do you need to create this long winded class to show that an item is active? Why can’t we just add a class named active? Well using @extend, we can eliminate the redundancies.

@extend will let us clean up our HTML by making sure that the selected item receives all the styling of the regular nav__item class. We will still be able to change the colour of the active state without having to cramp our fingers re-writing the styles declared before it. In my opinion an element should only have one class, and we should use the powers of Sass to make that element bend to our unbreakable will.

BEM me home tonight, baby.

I hope this has convinced you that BEM has more virtues than faults. Other people will try to tell you otherwise, but BEM is a real winner. Sure it can ramble on and on sometimes, and sure it feels like it is all redundant in the beginning — but with BEM we maintain a similar level of specificity across all selectors in our CSS. When we use the Sass ‘&‘ selector we are able to avoid nesting specificity conflicts, while still maintaining the visual benefits for organization. With Sass’s @extend operator, we are able to eliminate redundant BEM class names, and really trim down our markup! BEM forward, comrades!

Like this:

Like Loading…

Originally published at garrettlevinesite.wordpress.com on March 8, 2016.