Friends with BEM-efits
Tags: css, sass, architecture, bem
Published: 2018-01-30 19:10:08

---
title: Friends with BEM-efits
published: true
description: A quick Introduction to BEM naming syntax in CSS
tags: CSS, Sass, Architecture, BEM
---

## 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](https://en.bem.info/). 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](https://www.sitepoint.com/sass-basics-nesting/)!!**_

### 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!](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations#use_block_element_modifier)
- Tells other developers more about what a piece of markup is doing from its name alone.
- Removes the need for [descendant selectors](https://css-tricks.com/efficiently-rendering-css/#article-header-id-3).
- 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 :)