BEM (Block element modifier) - CSS Methodologies Part 3

So far we have discussed OOCSS (Object Oriented CSS), and SMACSS (Scalable and Modular Architecture for CSS). We’ve talked about the good points, the bad points, and who should use these methodologies.

To recap, these are our three example users:

Single user/hobbyist/lone-ranger (Alex)
Small agency/friends collaborating/3-4 developers (Tuco)
Large agency/corporation/5+ developers (Mary)

This week, we’ll be talking about…

##BEM (Block element modifier)

The other methodologies we’ve been looking at are all about how you organise your code, while not really changing how you write CSS. BEM on the other hand provides a strict set of rules on how to name your CSS classes.

In short, you create your CSS class names by defining CSS modules made up of ‘blocks’, ‘elements’ and ‘modifiers’, with underscores to separate.

In more detail, the way that works is you define the block, and within that you define the elements and modifiers. Sounds quite a lot just like OOCSS, right? Well it is - however, the way you name your CSS classes defines how these are structured. It’s easiest to just explain with an example:

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

In this example we’ve defined .block as the block. Inside that .block there is an .element which is defined by having two underscores between the .block name and the .element name. Inside the .block is also a .modifier which is defined by having two hyphens between the .block name and the .modifier name. Finally, we have an .element .modifier which is defined as a combination of the two.

Let’s quickly run through what each of these things are:

####Block

This represents an object on your website, similar to ‘layouts’ as defined in SMACSS. These could be for example:

Header
Navigation
Footer
Article

####Element

This represents a component within the Block, and these are only relevant to that block. An example of what these might be:

Header logo
Navigation item
Footer copyright text
Quote text of an article

####Modifier

Finally, this is how we represent different states of elements and blocks. These could be things like:

Header on mobile
Active navigation item
Blog article

The way you would use these classes in your markup is by putting them in directly, for example:

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__list__item">
      <a href="" class="nav__link"></a>
    </li>
    <li class="nav__list__item">
      <a href="" class="nav__link--active"></a>
    </li>
    <li class="nav__list__item">
      <a href="" class="nav__link"></a>
    </li>
  </ul>
</nav>

Now for the good points and the bad points:

####Good points:

Having a strict guide on naming your classes means that everyone understands how to name their classes, and everyone understands what everything means
In theory streamlining class generation should speed up development
Easy to do OOCSS if using pure CSS without a preprocessor

####Bad points:

Very WET (We enjoy typing)
Markup is overly verbose
Markup is un-semantic
Can’t reuse/share modules with ease

###Who should use BEM?

Alex - Depends, but probably not
If Alex wants to do OOCSS, but doesn’t want to use a CSS preprocessor, then BEM is a solution. However, when building things as a hobby, or prototyping - using BEM is probably only going cause slow down. CSS preprocessors make writing CSS massively simple, quick and enjoyable, and that’s what Alex should really be using.

Tuco - Maybe, depends
Similarly with Alex, Tuco could use BEM if his team didn’t want to use a CSS preprocessor. BEM is made for multiple people working on the same CSS. It’ll allow the team to practise a form of OOCSS without a preprocessor. It is possible to use BEM with a processor, but there isn’t much point using BEM in that situation, other than to help people understand what unsemantic CSS classes mean.

Mary - Yes, but it depends
This is what BEM was made for - the big team that Mary is working with will benefit most from using a CSS methodology like this. It will introduce strict rules that all team members must follow, and everyone in the team will understand how to write their CSS classes. It is possible to use BEM with a processor, so this would be a good solution if your team is already using one.