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.