CSS Tutorial: Better Code with BEM

CSS is simple, and yet many new developers struggle with it. That’s because its flexibility and lack of strict rules. Obviously, you have some rules to follow, but they are not enough to do things right. In this CSS tutorial, we will see how to improve our style with BEM: Blocks, Elements, and Modifiers.

In this CSS tutorial, we help you improve your existing CSS skills. So, if you still don’t know about CSS, you should begin from this getting started guide.

Introducing CSS BEM

What is BEM in CSS?

BEM is a framework, a convention, a way to work with CSS. More specifically, it tells you how to arrange HTML elements together and how to name CSS classes. In other words, it doesn’t give you new tools for styling your pages. Instead, it helps you write better code that is easier to read and to maintain.

BEM stands for Block Element Modifier.

With BEM, you consider all your HTML pages as sets of blocks, each of which contains several elements (and also other blocks). Furthermore, any block can come in different variants or flavors: those are the modifiers.

So, the first thing to do is to explain the three key components of BEM: Block, Element, Modifier.

The Block

The Block is a part of the page that can live on its own. You can think about it as a pre-made component, that you can take and place where you want, and on any page. An example can be an advertisement, a menu, or a chat popup. It is a large container.

The Element

Instead, an Element is another component of the page that you find inside a block. Unlike the block, the element cannot live on its own. For example, think about the textbox inside a chat popup where you write text. That textbox, with that specific CSS style, should exist only within the chat popup. In other words, it comes as part of the block and wouldn’t live outside of it.

The Modifier

Finally, a Modifier is something that allows you to alter the way a block or an element appears. Think about a banner, you may want to add some red color in case there is an error. Still, it’s not like you are doing a whole new banner. You are just making a modification, a new variant, of an existing banner. That’s what modifiers are for.

Unlike blocks and elements, that represent HTML components, modifiers represent a modification to a block or an elemnt. As such, they manifest themselves only as modification to class names and additional CSS rules.

Why CSS BEM?

Why bothering with following strict rules for how we name our CSS classes? After all, if you pick your own names and do your way, you can pretty much get the job done.

The main reason is maintainability and scalability. Whenever you write code, of any type, you shouldn’t think the only one reading it will be the computer. Think that other people will read it, and will have to modify it. It may not be true now, but eventually it can became a reality.

If you follow some very standard framework with BEM, it is clear how you work and what to expect from CSS. It is clear where each element is getting its style from, ultimately allowing you for faster modifications to your code.

How To Implement CSS BEM

Quick Guide to BEM

BEM is all about how you name your CSS classes. Each class name should provide the following information:

• The block this HTML tags belong to
• The element represented by this tag (unless it is a block)
• Any modifier you want to apply

Unlike traditional CSS, where you typically apply many classes to an element, with BEM you apply just one. And, in that one name, you should include all the information.

You should always provide the information in that order: block first, then element, and modifier for last.

When naming the CSS classes according to BEM, we use a double underscore to divide between the block and the element part, and a double dash to divide between the element and modifier part if present. In other words, our class name will look something like the one below.

block__element--modifier

Some people like to add a little prefix to tell that this class follows the BEM framework. A good prefix can be b-, resulting in the name below.

b-block__element--modifier

Just be consistent! If you decide to use a prefix for BEM classes, you must do it for all BEM classes.

Styling BEM Classes

When you apply style in CSS to BEM classes, you should style one class at once. In fact, with traditional CSS you had to combine many different slectors to get to the element you wanted. That’s not the case anymore with BEM.

Since each class name contains all the whereabouts of an HTML element, you can use just that class selector to target the element, and nothing more. In fact, you must use only the class as a selector to follow BEM, not even the element type.

Take a look at the following example.

// Bad design, using two classes to select an element
.block__element.modifier {}

// Good BEM design, 1 class
.block__element--modifier {}

// Bad design, relying on nested selectors
.block > .element {}

// Good BEM design, 1 class
.block__element {}

// Bad design, using the element type
div.header__menu {}

// Good BEM design, not using the element type
.header__menu {}

Not only this will help you with readability and clarity in your CSS code. It will also help your style load faster when the user loads the page, making it faster.

One Remark. You can still use traditional CSS for generic styling, anything that is not a block (e.g. styling the body, styling links or titles and so on).

An Example

In the following example, we represent the code for the header of a page. This should be the bar appearing at the top of the screen. As this is just an example, we won’t focus on the actual styling of the page.

Our page header will contain a logo, a menu, and a search button.

<nav class="b-header">
  <div class="b-header__container">
    <img class="b-header__logo" src="logo.png" alt="..."/>
    <ul class="b-header__menu">
      <li class="b-header__item"><a href="#">Home</a></li>
      <li class="b-header__item"><a href="#">About</a></li>
      <li class="b-header__item b-header__item--disabled"><a href="#">Coming up</a></li>
    </ul>
    <div class="b-search">
      <input type="text" class="b-search__input"/>
      <button class="b-search__submit">Search</button>
    </div>
  </div>
</nav>

As you can see, we decided to use some prefixes. Furthermore, there are a few things you should notice:

• A sub-element of an element does not include the name of the parent element. It only includes the name of the block (b-header__item contained in b-header__menu).
• When you apply a modifier, you apply it alongside the class for the element or block. In this way, the modifier can carry only the properties that are altered, while the basic properties come from the element or block (check b-header__item b-header__item--disabled).
• Since the search part can work as a standalone, it is a separate block that has nothing to do with the header (b-search).

All the styling that we have to do will be fore the following classes.

.b-header {}
.b-header__container {}
.b-header__menu {}
.b-header__item {}
.b-header__item--disabled {}

.b-search
.b-search__input {}
.b-search__submit {}

Put It To Practice

If you have been sticking with us for a while, you know we have a Full Stack Development course going on. In that course, you learn everything you need to become a Full Stack Developer. This CSS tutorial is part of that because BEM is something full stack developers need.

As part of the course, we are building a pretend bakery store website to try out what we learn. However, up until now we never used BEM in our CSS. Well, today’s exercise will see you rewriting all CSS and classes to be BEM. Obviously, the appearance of the website must not change, you only need to make changes under the hood.

Once you finished, you can check out the code of the course on GitHub at alessandromaggio/full-stack-course. Alternatively, you can also take a look at this commit to actually see the changes we made as part of this very tutorial.

The Wrap Up

In conclusion, using BEM with CSS allows you to write better code that you can later understand better. Since this is an industry-standard, it is something any Full Stack Developer would want to know, and you should as well.

If you are curious to learn more about BEM, take a look at the official website.