Friends with BEM-efits

An Introduction to BEM

What is BEM?

The Block, Element, and Modifier (BEM) methodology is a common naming convention for CSS classes developed by Yandex. The core idea behind BEM is to provide a strict way to arrange your CSS classes into modules. BEM captures the purpose and meaning through it's CSS class name syntax:

• Block: Represents a module or context where the element finds itself. ("What is it?")
  • navigation
  • footer
  • item-review
• Element: Describes a component within the block that performs a particular function. ("What does this do/show?")
  • item
  • link
  • button
• Modifier: Defines the appearance, state, or behavior of a block or element. ("What state is it in?")
  • active
  • red
  • large

We represent this syntax with two underscores for elements and two dashes for modifiers:

.navigation__item--active
.footer__link--red
.item-review__button--large

An Analogy

To grasp a further understanding of how these are all related, think of it like an analogy.

Hierachy

Car
|-- Transmission
|   -- Automatic
|   -- Manual

Person
|-- Female
|   -- Lips
|-- Male
|   -- Beard

CSS

.car {}
.car__transmission {}
.car__transmission--automatic {}
.car__transmission--manual {}

.person {}
.person--male__beard {}
.person--female__lips {}

Let's say we want to display different classes to describe a car's transmission. The block or module would be the Car. The element we are showing is a Transmission, and is modified or described by Automatic and Manual.

In our second example, we see that the modifier is coming before the element!!

If you look at our tree hierarchy, this approach makes more sense. In this example, a Person is being divided into a Female and Male class. Each modifier will have elements of its own, such as Lips or Beard.

Remember to be thoughtful and tasteful when creating your naming hierarchies. Nobody want's to read .person--female__arm__hand--left__finger--pinky and can easily clutter up your markup. If that level of specificity is needed, try breaking it down into submodules for easier readability and organization.

Sass + BEM = <3

In a Sass file, one way to structure your classes is through nesting.

.block {
    &__element {
        &--modifier { 
        }
    }
    &--modifier {
    }
}

which would print out to:

.block__element {}
.block__element--modifier {}
.block--modifier[]

The great thing about this architecture is potential to handle scalability. Code is grouped modularly and describes its purpose and state. Let's take a look at an example:

HTML

<ul class="tabs">
    <li class="tabs__header--active">
        <img class="tabs__content__image" src="">
    </li>
    <li class="tabs__header">
        <img class="tabs__image" src="#">
        <img class="tabs__image--inverse" src="#">
    </li>
</ul>

Sass

.tabs {
    &__header {
        &--active {
        }    
    }
    &__image {
        &--inverse {
        }
    }
}

Outputted CSS

.tabs {

}
.tabs__header {

}
.tabs__header--active {

}
.tabs {

}
.tabs__image {

}
.tabs__image--inverse {

}

Pretty cool! As applications grow, this nested structure makes class names easier to read and removes the guesswork when other developers read your code.

Just remember: Try not to nest your Sass more than three levels deep!!

So...Why BEM?

• Self-documenting CSS! It displays the hierarchy between different nodes' relationships in the DOM.
• Strict class naming promotes encapsulation and reduce naming collisions or using classes outside a given context.
• Performance benefits!
• Tells other developers more about what a piece of markup is doing from its name alone.
• Removes the need for descendant selectors.
• Component styles are decoupled and highly portable from project to project. In practice, this means an improvement in code quality and development speed!

In short, BEM will make you push yourself to pay attention to detail, think things through and thus raise the quality of your code :)