What’s the Point of Using BEM?

What’s the point of using a CSS naming convention like BEM? Isn’t it good enough to just choose the names of our CSS selectors as they are appropriate to our HTML elements, and add new ones when necessary? We’re going to take a quick look at why BEM can help us be more organized in our CSS, and why it can make it easier for us to read what’s going on in our HTML.

BEM allows us to split up our HTML structure in our mind’s eye. Essentially we are categorizing HTML elements into larger and smaller sections. We have our Block, which is a main HTML element or section. Some examples could be a banner for a website, or a popup module, or a section of a page containing a signup form. Our Block is basically an element that’s as large as an element can get without being a page itself, or the <html> tag or the <body> tag or something like that.

When we use BEM, we can take the example of a form section. We can pretend we have a form to sign up for a newsletter about puppies. One name for our element’s class could be “.puppy-news-signup”

However, maybe a better way we could do this with BEM would be to use simply “.news-signup” as the block name. If we have multiple newsletter signups on the site, this could be a superior idea, so let’s go with that. We’ll then use our Modifier as “–puppy”. So our selector will now look like this:

“.news-signup–puppy”

This way, we can have a parent class that defines the styles for all newsletter signup elements, which may share several styles. This is the benefit of using BEM, because we can have these classes to share styles between all of these similar elements.

You may be wondering why not to just use a unique CSS selector for each element. Why not use “.puppy-news-signup” for one form, and “.kitty-news-signup” for another form? For one, it’s easier to organize our CSS if the selectors for the similar elements both begin with the same words, i.e. “news-signup.” Besides that, having the modifier allows us to add CSS there for only the things that differ from the parent class.

Why wouldn’t we just use a new css selector for the things that differ? E.g. we could use “.news-signup” for the parent form, and “.news-signup.puppy” for the modified element? For one, having the “.puppy” class on it’s own in the CSS is difficult to read and decipher the meaning of. One would need to search the DOM to find the corresponding element. If we use the BEM notation, the CSS will be organized and easy to read. Let’s look at an example:

.news-signup {
    width: 500px; 
    font-size: 24px; 
    background-color: lightblue; 
}

.news-signup--puppy {
    background-color: beige; 
}

.news-signup--kitty {
    background-color: lightpink; 
}

And if we take a look at some example dummy HTML:

<h2>Kitty Newsletter Signup</h2>
<form class="news-signup news-signup--kitty">
    <label>
    Email <input type="text" /> 
    </label>
</form>

We get a little extra in the form of selectors in our HTML, but the tradeoff is that we get more organized CSS structure, and the ability to more easily see what is modifying the specific HTML elements, and why.

I hope this helped you to understand a little more about BEM!

Subscribe to Newsletter