BEM Syntax for CSS

Why we've adopted the BEM syntax for our CSS classes and the advantages it brings to our web design work.

At the beginning of this year we adopted the BEM syntax for our CSS classes. BEM is an abbreviation for Block, Element and Modifier and it's a syntax we apply to our CSS classes that is very well suited to object-oriented CSS. The BEM approach was first devised by front-end developers at Russian search engine Yandex but I first came across it by reading a post by Nicolas Gallagher.

So by using the BEM syntax, the CSS for a particular component will follow a pattern as follows:

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

For example for each of our service areas on the services page we have the following CSS classes:

.service {}
.service__heading {}
.service__links {}

If we wanted to style a particular service area differently, perhaps with a border around it we could add a modifier to the class as follows:

.service--bordered {}

So the HTML markup for a service area with a border would be as follows:

<section class="service service--bordered">
    <h2 class="service__heading">
        ...
    </h2>
    <div class="service__links">
        ...
    </div>
</section>

The advantages of using BEM syntax for CSS are:

Our CSS classes are easier for other team members to understand as they can easily identify the components in the HTML and also the purpose of the CSS classes.
As classes are prefixed with the block it reduces the likelihood of accidentally having two classes with the same name, useful for larger projects.
Using a naming convention gives your CSS and HTML more consistency making it easier to share code between projects.

Tagged with:

The Power of Sass