Boost Your CSS with BEM Naming and SASS Nesting

We all have struggled with keeping our CSS classes ordered, maintainable, and more specific. SASS nesting and the BEM (Block - Element - Modifier) structure will help get us to get rid of this concern.

For a long time, I wondered what was the best approach to achieve ordered, readable and specific enough CSS code. It turns out the solution to this already exists, we just need to combine two tools that I now find to be very useful.

After reading this article, you will have knowledge of how to combine two amazing tools (SASS and BEM), to make you more productive. If you already know some basic CSS and have at least heard of SASS, this will be easy to follow.

What is BEM?

The Block Element Modifier structure. This is a method that consists of naming your CSS classes based on the role they play in your HTML. Let’s quickly look at each component of this structure:

• Block: We can look at the block as the container of the nested elements we will style within it. An un-ordered list

  <ul>

  with the class of

  menu

  , for example.
• Element: The list items

  <li>

  contained within the

  menu

  class as children are our elements, we may give them a class of

  menu__item

  .
• Modifier: Now let’s imagine one of the list items (or links in the menu) are disabled or are on an “active” status because we are on that page. Those would be our modifiers,

  .disabled

  and

  .active

  . Anything without the modifier is just the default for that element. The class for our modifier could be

  .menu__item--active

  .

To select the block we give it a class name. To select the children we separate it with double underscore

__

. And if we have a modifier we add it with a double dash

--

in front of it:

block__element--modifier

.

What is SASS?

One of the most widely used CSS pre-processors. It brings to the table variables, functions, mixins, maps, and what’s most important to this article, nesting.

Example: 

Let’s look at the code for the menu scenario with plain CSS cascading selectors (assuming we want to style the

.active

item):

Now let’s look at it with BEM:

And last, but not least, let’s see how it would look using SASS and BEM together:

Notice the difference? Yes, it looks like there is much more to write, but let’s break down what's going on so that you understand how this will make your CSS writing more efficient.

Step 1:

We first target the Block

.menu

, to which we can apply any styles it might need.

Step 2:

From there we can target the Element, which is

.menu__item

.  We can target it using

&

which tells SASS to concatenate the selector used for the parent

.menu

with

__item

. 

We can add the styles needed for this element here without having to create a separate selector

.menu__item

  in our SASS file. We can also nest all variations (modifiers) for that item.

Step 3:

At this level, we may target the styles for our Modifiers, active and disabled. In plain CSS they would be

.menu__item--active

or

.menu__item--disabled

respectively. But it doesn’t mean this is the end of the nesting. We can follow the same pattern, and nest a

&

together with the child selector

__xyz

.

This way we can nest even more, without incurring in deep CSS cascading. We may even add

:hover

to the mix and say we want the active element to have a different color, size, or text-decoration. With only adding

&:hover

nested within the

__active {...}

CSS block we can achieve this. The same goes for

::after

and

::before

and any other selectors.

More benefits?

This approach not only allows us to style the container and it’s child elements in a quick and easy way by nesting the child’s class selector. It also helps keep everything in the same place, making finding and reading these styles much easier.

The compiled CSS file would look something like the following: 

As you can see, even though they are being nested in our SASS file, the result will not be a cascading mess, but a well-structured and specific set of rules. 

BEM is a very powerful structure to follow when naming our classes. It allows us to keep everything clear, specific, reusable and easy to adjust if needed. But, let’s not deny that typing long class names over and over can be exhausting. All you want is to get the styles to work and keep them from being overwritten by some other rule down the stylesheet.

This simple nesting and naming pattern can save you not only time but headaches as well.  

Imagine you had to change your HTML structure, replace a section with a div, or a similar change. Now you have to go back and find each selection you’ve made for that div and it’s child elements, and replace it. Not cool, right? With this method, you add the right class to the new elements and that's it, nothing more to worry about.

What if you figure you are repeating your styles for an element with several other elements and they are in different containers, or with different HTML tags? With this approach, all you have to do is to put the class you already have in those elements. They will still be correctly styled despite being in a completely different place.

What next?

If you got this far, it means that you care about making things efficiently, with best practices in mind, and are eager to try new things to achieve those goals. Below are the links to the official websites where you can get more in-depth documentation on BEM and SASS.

BEM (Block - Element - Modifier)

SASS (CSS Pre-processor)

An alternative pre-processor you may try is PostCSS.

Hopefully today is the beginning of a more productive relationship with CSS!