BEM - block element modifier, object-oriented CSS

How BEM benefits a front-end web developer

BEM seems to be all the rage for front-end developers working with CSS.

At least, I’ve been CSS’ing with BEM on every project I’ve worked on since 2016.

OOP Organizational Structure for CSS

BEM is an organizational syntax, but it’s also a methodology. There’s no one right way to BEM your stylesheet 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 developer working on a website in the future.

Componentizing Design

BEM makes you think in components.

Components are a single piece — or function — of a web page.

Establishing what is and what is not a component is a fuzzy science. It’s mostly up to you, but the idea is to define a component as an object and then identify smaller pieces within the component, so you can define them as elements of the component.

Convey Meaning through Syntax

What you end up with are class names for HTML markup that convey meaning about each element in relation to the styles being applied. Quickly determine what component an 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.

Simplified Modular Maintainability

Modular code is easier to update and maintain.

Having componentized — or modular — code means common elements live in fewer places.

The obvious advantage is less to edit when it’s time to make a maintenance update.

An additional benefit of BEM is 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 for identifying and finding code snippets quicker.

Time is money and any time you can save time is an efficiency booster.

Increased Confidence Level

Using BEM can increase your confidence level when making CSS style changes to your website.

For instance, if you keep your CSS flat – at a specificity level of 1 – you can know for certain that the change you want to make will only ever effect that one thing.

Kiss nesting-related styling issues goodbye and say hello to clean looking stylesheets.

By specificity level 1, what I mean is your classes should never be nested.

If you’re nesting too much it means the organization of the styles in your stylesheet is going awry. In my opinion, if your stylesheet starts to look ugly — when it’s getting “code stink” — something’s gone off-course. Asses the situation, adapt, and re-align.

Intuitive Adaptation

Use a BEM modifier class if you need to change the look of a component or element.

If you’re new to BEM and haven’t thought about how modifier classes work it can seem like a pain.

But, I promise (from my experience) modifier classes are totally worth it.

To know you can go back to a website you’ve coded 6+ months ago and make a quick change like the code was fresh in your mind from yesterday is a priceless quality.

Next Level CSS Optimization

Combining BEM with other front-end organizational strategies like ITCSS or Atomic Design allows you to really step up your front-end website development game. 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 website.

What does BEM stand for?

Now that you know a few ways BEM can help you do front-end styling better — what do the letters B-E-M 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 used on blocks or elements for changing an element’s appearance or behavior.

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?!

Let me show you an example.

Syntax

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

block__element--modifier

See the B, E, and M? Good.

B – BEM Block Components

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 nearly identical HTML markup.

Think of this as an opportunity to create a widget block — the B of your BEM component.

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

E – BEM Block Elements

Now, most widgets have a title and content. Add BEM elements to your BEM block called title and content. Title and Content are the E’s to the BEM component.

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

Defining BEM CSS Classes

When styling it’s smart keep your CSS flat. Here’s what mine would look like:

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

Maybe you’ve added some style properties to those classes too to make titles bold and to make the content 10px away from the title, like so.

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

.widget__title {
  font-weight: bold;
}

.widget__content {
  padding-top: 10px;
}

M – BEM Modifiers

BEM modifiers are for when you want to have a variation of a BEM component.

Imagine the code above works for 4 of 5 sidebar widgets on your website, but the last one is different.

You don’t need to dump the code you’ve already written. Using BEM modifier classes, simply add or append style properties to the existing CSS styles.

Consider a scenario where you want to make a widget with a red background, for instance. You don’t need to create an entirely new widget. In fact, you can keep and repurpose all of the code you’ve already written for the existing widget components.

Let’s look at modifying with BEM.

BEM Class Naming Conventions

First, decide on a class name. Call this .widget–alt or .widget–red, for example. widget–alt is more generic and gives you greater flexibility. If a month from now you decide red was the wrong decision and all of your widgets should really be blue it would be extra work to keep the class names in sync, so generalizing is a good strategy. Class naming is important, but it’s totally up to you.

Modifier Markup

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>

See how .widget is now .widget.widget–alt?

If you’re using SCSS, you could @extend .widget into .widget–all. However, I find as convenient as extending can be during 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.

Conclusion

Once you’re doing it, BEM isn’t hard.

It helps you organize your HTML and CSS code. It promotes thinking in more organized fashions, and being more efficient all around.

You’ll be able to work more quickly and with a higher degree of confidence whether you’re developing new websites or managing updates to existing code-bases. For a more in depth look at BEM check out this article on CSS-Tricks.