BEM naming convention

BEM stands for "Block, Element, Modifier" and it’s a way to write your CSS class names in an organized way.

I’ve recently been at the From the front 2015 conference in Bologna, where Harry Roberts (creator of Inuit) gave a sweet talk about structuring your CSS while keeping your sanity. Throughout the presentation he used the BEM naming convention, which I’ve also started using recently; it’s easy to understand and really helped me make sense of large stylesheets.

So I’m going to sum up BEM in just a few rules, let’s start!

Rule number 1: Class all the things

Always use classes instead of tag names (this is important!). For example, you will have:

instead of

This is because tags have higher specificity than classes, which would often result in difficulties when needed to change those values down the road. Also, never use IDs.

Rule number 2: Blocks and elements

Main layout elements are the "Blocks" part of the BEM metodology.
Elements within Blocks are to be marked like follows: .blockname__elementname

Example:

and the relative html would be:

Rule number 3: Modifiers

You will obviously have variants of an item. These are the Modifiers (the M in BEM). For example, classes for a default, a small and a large avatar would be named like follows:

Bonus rule: Javascript

For elements that work with Javascript, just add a special "js" class which you’ll only use for Javascript tricks, without attaching any style to it:

That’s it! It’s really easy, just a few simple rules make your code more readable and maintainable. Check out Harry Roberts’ presentation for lots of additional info and tips.

---

Photo by Lee Roylland