BEMuddling CSS

  •   Josiah Heigel

By Josiah Heigel

As any front-end developer knows, continually starting projects from scratch can be superbly mundane.

Creating basic HTML templates, stylesheets and JavaScript files over and over again isn’t anything to write home about nor is it the exhilarating experience we hope for day in and day out.

Fortunately, some wonderful people have made some tools that help those processes become more automated. But what about the actual styles once the project skeleton is ready to go? This one is a little more tricky because there aren’t as many readily available helpers out there. Sure, there are some CSS pattern libraries like pears and refills or style guides by MailChimp and Starbucks. Yet, everyone does something a bit different and most of the time these libraries are a bit of an overkill.

What is BEM?

Thus, my introduction to BEM. BEM is an acronym for Block, Element, Modifier. What exactly does this mean? Well, at its core, it’s simply a way to standardize your projects. You can go very, very deep into this methodology and if you choose to do so, read on. However, for this article, I simply want to talk about how I use this technique to create a reusable set of components that rarely change as well as use my IDs/classes to provide context to the structure of my project styles as a whole.

The Block

First, what is BEM and how should I use it? The B represents a block in our project. The block is the actual component such as a search bar, navigation or even a logo. It contains all the elements or is the main element of what we’re building in our markup. Styling this is no different than what we’re used to:

The Element

The E stands for the elements that are present within the block and would include inputs, lists, anchors and images in relation to the components described above. However, here is where BEM really starts to show its true colors. We denote these elements in our CSS by applying a double underscore between the block and the element itself.

The value comes in sharing code where any developer familiar with this approach has indications of style hierarchy.

The Modifiers

Finally, the M in this acronym is modifier. The modifier describes a change to the component or element either stylistically or functionally. The evidence of a modifier is a double hyphen between the block or element and the modification description. An example of these classes could possibly be:

The Example

Let’s take a look at an example to better describe this methodology.

Looking at this code, it’s certainly not unreadable and it gets the job done. However, what if we structured this using BEM?

This is not the only way to structure this code, but in my personal opinion, it’s a bit more readable and it provides structure around our CSS, apart from simply indenting or commenting sections. Also, it’s easy to tell that our navigation block and elements have modifications for centering or alternate styles as well as what styles focus on child elements.

You don’t have to like this approach and you certainly don’t have to use it! I love it and it has helped speed up our development by 20%! That’s actually a lie, I really have no idea, but the consistency has helped to make me much more efficient and handing off projects is much simpler once someone picks up the structure. As Patch Adams said, “Wearing underwear on the outside of your clothes can turn a tedious trip to the store for a forgotten carton of milk into an amusement park romp.” Maybe wear your styles outside your clothes?