You are currently offline, so some features of this site may not work fully.

Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

Taking the concept of BEM — Block / Element / Modifier — and applying it to help with Sass variables in my framework.

This came about after a friend of mine had a little look through my code whilst helping me with a CSS bug. Tristan noticed that I took the concept of BEM a little further by naming my variables with modifiers.

BEM - an overview

Harry Roberts gives a great in-depth overview of BEM but in summary the syntax is as follows:

.block { }
.block__element { }
.block--modifier { }

Where .block is the main component, a selector denoted with __ is a child component related to the parent, and a selector denoted with -- is a modification of the element.

This shows in the CSS and in markup that the elements are related without the CSS having to be overqualified/nested as much - creating cleaner, more reusable selectors.

A practical example:

.site-logo { } /* Standard logo */
.site-logo__link { } /* Link in the logo */
.site-logo--christmas { } /* Special edition logo */

An example in Sass variables:

Here I define the blue you’ll see around the site as #2A2C9F and in order to use lighter and darker shades I use the Sass functions lighten( ) and darken( ).

I do this to achieve a level of consistency between shades and so that the color value will only need to be changed in a single place if required.

$brand-blue: #2A2C9F;
$brand-blue--light: lighten($brand-blue, 10);
$brand-blue--dark: darken($brand-blue, 10);

Advantages of naming them in this way are:

  • I now know of the dependency chain - one of the prominent features of BEM
  • I can quickly see that other colors will be affected if I change the main brand color
  • I know not to modify that color further down in my stylesheets, breaking brand guidelines that may be in place

This is of course a small example but the beauty of this idea is that it can easily scale to much bigger projects and teams.

It may be overdoing it a little but it definitely helps me out when maintaining my styles, and I use it a fair bit in the Sass framework I’m in the midst of building.