BEM - block element modifier, object-oriented CSS

How BEM is benefiting Front-End Website Developers

In my neck of the web, BEM seems to be all the rage. I’ve been using it on every project I’ve worked on over the last 2 years, anyway. It’s a syntax, but it’s also a methodology. There’s no one right way to BEM your code, but there are definitely ways that are better than others. BEM promotes object-orienting your HTML markup and CSS styles and can be a huge time saver for a developer.

BEM makes you think in components. A component is a single piece or function of your page. How you establish what is and what is not a component is a little fuzzy and mostly left up to you, but the idea is that you define a component as an object and then identify the smaller pieces within the component and define them as elements of the component.

What you end up with are class names for HTML markup that convey meaning about each element in relation to the styles being applied. You can quickly determine what component the element belongs to and if you’ve organized your CSS you can discern where to find the styles in your stylesheet(s). By componentizing your code you’re able to modularize your code. Modularization means greater reusability.

Modular code is easier to update and maintain. Essentially, having componentized modular code means that common elements of your code live in fewer places. The obvious advantage is that there is less to edit when it’s time to make a maintenance update. The additional benefit of BEM is that you can be verbose with your naming conventions and at the same time make your naming conventions in markup match your naming conventions in your folder structure. It’s a simple to do trick to make identifying and finding code snippets happen quicker. Time is money and any time you can save is an efficiency boost in the grand scheme of web development.

You can also use BEM in ways that will increase your confidence in making style changes to your site. For instance, if you keep your CSS flat – or at a specificity level of 1 – then you can know for certain that the change you want to make will only ever effect that one thing. You can kiss nesting related styling issues goodbye and say hello to nice clean looking stylesheets. By specificity level, what I mean is that your classes should never be nested. If you’re nesting then you’re organization of the styles in your stylesheet is wrong. In my opinion, if your stylesheet starts to look ugly then something’s gone off-course. Asses, and re-align. If you need to change the look of a component or element then you’re supposed to use a BEM modifier class. That’s what they’re there for.

If you’re new to BEM and haven’t thought about how it works in practice then it can seem like a pain, but I promise that from my experience it is totally worth it. To know that I can go back to a website I coded 6+ months ago and make a quick change like it had been fresh in my mind from yesterday is priceless.

When you combine BEM with other front-end organizational strategies like ITCSS or Atomic Design (stealth pattern lab name drop reference) then you’re able to really step your front-end game up. You can optimize development, componentize your front-ends, and create some really cool easy to reuse style guides. Best part? You can BEM on any kind of site you want.

What does BEM stand for?

BEM stands for Block, Element, Modifier.

A block is a standalone entity that is meaningful on its own. An element is part of a block and has no standalone meaning. Elements are semantically tied to their blocks. Modifiers are flags on blocks or elements used to change an element’s appearance or behavior.

An Example of BEM

Okay, so BEM is awesome and you trust my judgment on this since I work in the industry and people pay the companies I work for tens of thousands of dollars to be good at what we do, but HOW DO YOU DO IT?! How does BEM work? Well, let me show you an example.

BEM Syntax

First, let’s look at an example of BEM’s syntax:

block__element--modifier

Building a BEM component

Let’s say you want to create markup and styles for a WordPress widget. They’re programmatic, so it’s a good example because you can have lots of different widgets that use basically the same HTML markup.

Creating a BEM Block

With BEM, you could think of this as an opportunity to create a widget block.

<div class="widget"></div>

Adding Elements to Your BEM Block

Now, most widgets have a title and content. Let’s add BEM elements to our BEM widget block called title and content.

<div class="widget">
  <div class="widget__title">Widget Title</div>
  <div class="widget__content">
    <p>Hello, world!</p>
  </div>
</div>

Defining styles for BEM classes

Remember, when you style it’s smart keep your CSS flat. Here’s what mine would look like:

.widget { }
.widget__title {}
.widget__content {}

And maybe you’ve added some style properties to those classes to make titles bold and to make the content 10px away from the title;

.widget {
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

.widget__title {
  font-weight: bold;
}

.widget__content {
  padding-top: 10px;
}

That’s the jist of BEM. But, wait! That’s just the B and the E. What about the M? Oh yeah, BEM modifiers.

Using BEM modifiers

Modifiers are for when you want to have a variation of a BEM component. Let’s say that the code above works for 4 of 5 sidebar widgets, but the last one is different. You don’t need to dump the code you’ve already written. You can simply use a BEM modifier to add or append style properties to the existing CSS.

Imagine that you needed to make a widget with a red background, for instance. You don’t need to make an entirely new widget. In fact, you can keep all of the code you’ve already made for widget components. Let’s look at how to modify it.

First, you need to decide on a class name. You could call this .widget–alt or .widget–red, but –alt is more generic and gives you greater flexibility of a month from now you decide red was the wrong decision and all of your widgets should really be blue. So, naming is important, but it’s totally up to you.

Second, you want to add your new class to the markup.

<div class="widget widget--alt">
  <div class="widget__title">Widget Title</div>
  <div class="widget__content">
    <p>Hello, world!</p>
  </div>
</div>

Do you see how .widget is now .widget.widget–alt? If you’re using SCSS, you could @extend .widget into .widget–all, however, I find that as convenient as extending is at the time you decide to use it, it’s often confusing and time consuming down the road when you go back to track down where a style is coming from. I prefer to add the second class to your markup as I’ve shown here in the example.

Closing thoughts…

Once you do it BEM isn’t so hard. It’s going to help you organize your code, think in more organized fashions, and be more efficient all around. Whether you’re actively developing new code or making maintenance updates on existing code you’ll be able to do it more quickly and with a higher degree of confidence if you’re working with BEM. For a more in depth look at BEM check out this article on CSS-Tricks.

That’s all for now. Happy coding.