/ bem

To BEM, or Not to BEM: Part III

I've described the basics of BEM and provided an example of BEM already. Now it's time to show something more. Something, that has moved us back to quick fixes effect and how we've dealt with them.

Case Study: Refactoring Flash Messages

You can see a flash message on Wimdu's website in a few places—some short text with some instructions for the user, for instance, a message about having a voucher applied on the checkout page.

This is how the flash messages look:

A flash message on Wimdu

We've BEMified the module already, so let's just quickly take a look at the code:

.flash {
  padding: 15px;
  border: 1px solid #f8fdf4;
  border-radius: 2px;
  color: #212121;
}

.flash__header {
  /* code */
}
<div class="flash">
  <div class="flash__header">
    <h3 class="flash__title">
      Lorem ipsum dolor sit amet
    </h3>
  </div>
  <div class="flash__body">
    Lorem ipsum dolor sit amet...
  </div>
</div>

We have a lot of the flash messages that look slightly different and that's where we use the modifiers. Quick preview of some of the flash messages on our site:

.flash {
  padding: 15px;
  border: 1px solid #f8fdf4;
}

.flash--error {
  border-color: #c23d4b;
  background-color: rgba(194, 61, 75, 0.1);
}

.flash--with-icon .flash__body {
  padding-left: 45px;
}
<div class="flash flash--success"></div>

<div class="flash flash--error"></div>

<div class="flash flash--info"></div>

<div class="flash flash--panel"></div>

<div class="flash flash--with-icon"></div>

Looks quite nice, doesn't it? Not so fast...

Code Wars: The Bootstrap Strikes Back

After a while, we had to add a flash message with an icon, that indicates a success result of a user's action. This is how it looks:

A flash success message with an icon

A quick look at the code:

<div class="flash flash--success flash--with-icon flash--voucher">
  <i class="flash__icon"></i>
  <div class="flash__header">
    <h3 class="flash__title">Lorem ipsum dolor sit amet</h3>
  </div>
  <div class="flash__body">
    Lorem ipsum dolor sit amet...
  </div>
</div>

A block with three modifiers applied?! This reminds us of the quick fixes that we wanted to avoid in the first place! What can we do about it? CSS pre-processors come in handy.

"Hacking" BEM

At Wimdu we're using SASS with SCSS syntax (looks really similar to plain CSS) as our pre-processor. It works great and offers a lot of nice features (variables, extends, nesting, mixins, etc.), that can keep your CSS code cleaner and easier to maintain. What can we do about our flash message? Let's use some of the benefits of the pre-processor—placeholders.

// Placeholders

%flash-with-icon {
  // code
}

%flash-success {
  // code
}

.flash {
  // code
}

.flash--with-icon {
  @extend %flash-with-icon;
}

.flash--success {
  @extend %flash-success;
}

.flash--voucher {
  @extend %flash-with-icon;
  @extend %flash-success;
  // code
}

All the properties that we used to have added for the modifiers, we moved to placeholders. To limit the modifiers applied for this flash block, we’ve created a new one called voucher, which extends properties of %flash-with-icon and %flash-success. Thanks to that, we could remove two modifiers from the block. What’s the final result?

<div class="flash flash--voucher">
  <i class="flash__icon"></i>
  <div class="flash__header">
    <h3 class="flash__title">Lorem ipsum dolor sit amet</h3>
  </div>
  <div class="flash__body">
    Lorem ipsum dolor sit amet...
  </div>
</div>

Looks much better.

Final Thoughts

BEM is easy to learn, it doesn’t require any extra setup, helps you to simplify CSS selectors and organise your code better. You don’t have to style by elements anymore, you won’t be confused about how to name an element inside a block and all the class names are unique per block.

There are only two hard things in Computer Science: cache invalidation and naming things.

– Phil Karlton

On the other hand, sometimes it’s hard to implement BEM in smaller projects. As usual, people will be confused about how to name a block and in order to avoid the quick fixes mess, you have to use CSS pre-processors.

Should I start using BEM?

Yes.

Lukasz Klis

Lukasz Klis

Front-end developer at reBuy, living in Berlin, Germany. Gamer after hours, enjoys good burgers and coffee.

Read More