The naming of things is notoriously difficult in the world of programming. BEM (Block, Element, Modifier) is a naming convention used by developers to name HTML and CSS classes.

The idea behind it is to create a naming convention that makes it easy to identify the different parts of a block and the elements within.

Using a standardised naming convention makes it easier for everyone on a team to understand how things are organised.

Handling CSS specificity across an entire codebase can be challenging. With BEM, every selector has the same specificity, so you never have to worry about specificity issues.

The naming convention and syntax is:

  • Block – the name of the component. Something that communicates meaning while being short enough not to interfere with readability. For example .case-studies.
  • Element – an element of the block. Separated from the block name with a double underscore. For example .case-studies__item.
  • Modifier – allows for things to be styled differently. Separated from the name of the block or element by a double hyphen. For example .case-studies__item--featured.

When I started learning BEM, the posts I stumbled upon were overly simplistic. They gave a good introduction to BEM—but they ended there. Because of this, I created overly complex class names that attempted to mirror the hierarchy of the block (i.e. .case-studies__item__link__image). The trick is to keep things flat, there’s no need to match the hierarchy of the markup.

Using the BEM naming convention

Simple example

Complex example

BEM and Sass, a perfect partnership

A key concept in developing maintainable front end code is avoiding repetition by identifying patterns in our HTML and CSS and abstracting those into reusable components.

BEM works well with a CSS pre-processor like Sass, for several reasons:

  1. You can break your components up into individual files. These components can then be used across multiple projects with minimal additional effort.
  2. You can nest elements and modifiers within the parent block class by using the Sass parent selector (&). This makes for super clean and organised files.

BEM and utility classes, a powerful combination

When you’ve built up a library of reusable front end components, being able to make use of them within different contexts can be a challenge. You might need to change a background colour, adjust a components padding or margin.

Utility classes are single purpose classes used for simple tweaks to an element’s appearance. Having a collection of utility classes allows us to easily make these minor adjustments without having to create modifiers for each use case.

Utility classes can be applied to the block or any child element. In the example below, we’ll highlight the first case study with a different background colour and a larger heading.

Conclusion

I first learned about BEM from my colleagues at iWeb. The front end team were talking about atoms, molecules and organisms around the same time… I was skeptical of the whole thing at first—I was afraid the process would be too difficult, making things more complicated than they needed to be. But then I learned that there’s actually some method to it all.

Once you’ve wrapped your head around the syntax, BEM is a great way to organise your CSS and makes it easier for other developers to read and understand. I’ve been using it for years, and hopefully it will help you too. If you’re interested in learning more about BEM, I recommend checking out its website and reading this post by Harry Roberts.