BEM — Smart Sass Architecture for Beginners

What is BEM?

The Block,Element, and Modifier(BEM) methodology is a common naming convention for CSS classes developed byYandex. 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. Theblockor module would be theCar. Theelementwe are showing is aTransmission, and ismodifiedor described byAutomaticandManual.

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, aPersonis being divided into aFemaleandMaleclass. Each modifier will have elements of its own, such asLipsorBeard.

Remember to be thoughtful and tasteful when creating your naming hierarchies. Nobody want’s to read.person--female__arm__hand--left__finger--pinkyand 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 = ❤

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 thanthree 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 fordescendant 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 :)