Cleaning up CSS with Sass and BEM

Seann Branchfield
Aug 10, 2019 · 4 min read

For anyone who has ever tried to style HTML with CSS, with larger projects we all know what a mess that can turn into especially when there are child elements within parent elements and all kinds of different hexadecimal colors and other parameters.

Fortunately, there are two very useful tools to help organize CSS. Sass is a CSS extension or preprocessor. BEM is a set of naming conventions. Both of these work wonders to make CSS more readable.

The only real downside to using Sass in the need for a compiler to convert the code into CSS. Tools exist that will help you manually compile the code, whereas some text editors have plugins that will do it automatically.

Sass and SCSS

Sass, a.k.a. Syntatically Awesome Style Sheets is essentially a way to write CSS with improved syntax. Values for colors and other properties can be stored in variables which can help make it easier to see what you are assigning. Sass variables are declared starting with the $ syntax and ending with a colon to set values:

Most of these are colors, but the $greenBorder variable on line 2 actually stores values for a border instead!

For my most recent project, I chose to use SCSS which is a more modern version of Sass that maintains most of the regular CSS syntax such as the inclusion of semicolons and brackets. Therefore, anything that is valid CSS is also valid SCSS.

Additionally, you can also mirror the nesting of elements as they are in HTML with Sass which really helps give clarity to which elements are the children of other elements.

BEM

While Sass is an actual extension of CSS, BEM is a methodology. It is purely naming convention for your classes that helps you keep your code organized. BEM stands for Block Element Modifier. The idea is that you think about names for CSS classes based on whether an element is a child or parent of another element and if there are multiple of the same type of children then you can give them modifiers if needed.

So instead of the <nav> and <a> tags being referenced in the SCSS from before, now they have been converted to classes. The .nav class is the parent and represents the whole <nav> element. The .nav__link class has been given to the <a> tags that are nested inside the <nav>. This class now references the block (.nav) while the double underscore plus a new word to describe what it is makes it very clear that each of these <a> elements are descended from the .nav.

The text “Lorem” in black is an <h2> with class .component__header. The green text paragraph has a class of .component__story. Both of these are inside <div class=”component”>.

Further on the page I have some elements that all share a gray background. So these sit on <div> with a class of .component. Since each of these components has an <h2> that has a header to the section, I have named the class for the <h2>, .component__header. Likewise since each of these components has a story in a <p> tag I have given those the class .component__story.

Suppose I had buttons on these components as well so people could “like” or “unlike” a story. I could give these the class .component__button — like and .component__button — unlike. The “component” refers to the block that it is part of. The “button” refers to the element that it is. And finally, the “ — like” or “ — unlike” is a modifier for the two types of button we can have.

The point of all of this is to have names that have meaning in the code to help keep it organized and easier to read. Tools like Sass and BEM are must-haves when working on large projects with a lot of styling.

Seann Branchfield

Written by

Full Stack Web Developer and Musician

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade