Organize Your CSS with BEM
How many times have you been on a project where the CSS was huge and poorly structured? You try to change some style and it ends up either messing up some other element or simply doing nothing. There’s no time to look into a thousand lines of code so you just use !important and move on to the next problem. By doing so you are basically giving the next developer the middle finger. Who knows, you might need to revisit it later down the road and that developer ends up being you. Unfortunately this post won’t teach you how to fix these problems but hopefully you’ll learn a way to avoid them.
For starters, let’s take a look at the following example:
The code may look fine at first, but pay attention to the class title, since the class is the same for both the first h2 and the one inside the menu, they will share styles. If you want a different look on the title of your menu you will end up declaring it as .menu .title and having to override some of the previous styles.
Then there is the class blue, it is used to set the third anchor of the menu to blue, but if we just give the style to .blue in the css file it doesn’t change the color, because we’re giving the color grey to .menu .item, hence giving it a higher specificity. In CSS the higher the specificity, the higher the precedence, so it needs to be declared as .item.blue which doesn’t look good and keeps the specificity high.
A simple but efficient solution for these problems is using a methodology called BEM.
BEM - Block Element Modifier
BEM is a naming convention for your HTML and CSS classes. It eases the understanding of the relationship between the HTML and CSS of a project and facilitates the reusability and maintenance of code.
A Block is a part of the code that has meaning on its own, all blocks are at the same level of specificity. In the example menu would be a block and so could be the first title.
Parts of the block that have no meaning on their own are called Elements. The title and all the item anchors are elements, all belonging to the menu block.
Finally, we sometimes need classes to modify a certain aspect of a specific block or element without interfering with other components with the same class, hence the name Modifier. On the third anchor of the example there is a class blue that changes (modifies) the color to blue.
Naming the Classes
There are different naming conventions for BEM, I’m going to present the one I use but feel free to search for others and use the one you feel more comfortable with.
A block can consist of letters, digits, and dashes. So in this case menu is already using BEM convention.
Next come the elements, these need to be semantically tied to their block. Use any combination of letters, digits and dashes to create your element name, then just add it to the block name separated by two underscores. After doing this you get menu__title and menu__item.
Finally, the modifiers, their logic is the same as for the elements, except you use two dashes to join the modifier name to the block or element. In the example there’s only a modifier to an element, so we get menu__item — blue. If there was a variant of the block menu, for instance a vertical menu, it would be written menu — vertical.
Naming summary:
block
block__element
block--modifier
block__element--modifierSo going back to the example and applying BEM you get the following:
Why Use BEM
These changes may look redundant for such a small piece of code, but when you have a project with dozens of stylesheet files and developers new to the project it will be helpful to follow BEM.
BEM keeps the nesting in the names of the classes, therefore it keeps the CSS specificity low and flat, this way you won’t run into so many problems even if your project scales. It also makes it easier for someone new to the project to understand how things are connected, if you see form__submit you will know right away that the submit belongs to the form.
Another good reason to use BEM is reusability. Since blocks are independent, style-wise, from each other it’s easier to reuse blocks on other parts of your project, using modifiers to make necessary changes. We could easily create a vertical menu somewhere in our project, for that we would only need to create a new modifier menu — vertical and give it the right styles.
Think Long Term, Think BEM
One of the main points to retain from this post is that, when using BEM you will not see significant differences on a small project, but you will be thankful when that project scales. BEM keeps your CSS well organised and ‘flat’, making it easier for you and others to modify it in the future.
Have any feedback or questions? Feel free to leave a comment bellow!
I’m a developer at Runtime Revolution, here we focus on delivering the best possible product to our clients while assuring our developers learn the best principles.
