BEM Methodology In CSS: A Quick Start Guide
Tags: css, bem, methodologies
Published: 2020-01-14 09:23:13

---
description: "Start practicing the BEM naming convention today with this short, actionable guide. Learn the fundamentals so you can start using BEM in your next project."
canonical_url: https://scalablecss.com/bem-quickstart-guide/
---

This is a quick start guide to learning [BEM](https://en.bem.info/methodology/), the component-driven CSS methodology. 

If you want to start practicing and applying BEM to your projects, this guide will help you get started.

---

**Bonus:** [Download a free cheat sheet](https://scalablecss.com/resource/bem-cheat-sheet/) that will show you how to quickly get started with BEM.

---

Ready? Let's dive in:

* [BEM overview](#bem-overview)
* [B - Blocks](#blocks)
* [E - Elements](#elements)
* [M - Modifiers](#modifiers)


## **BEM Overview**

BEM (Block-Element-Modifier) is a CSS naming convention developed by the team at [Yandex](https://tech.yandex.com/bem/) to improve scalability and maintainability in web development.

Put simply, the idea of BEM is to "divide the user interface into independent blocks" by naming CSS classes in the following methodology:

```scss
/* Block component */
.card {}

/* Elements are dependent on their parent block */ 
.card__img {}

/* Modifiers are for incremental style changes */
.card--dark {} 
.card__img--large {}
```

1. **Block:** an independent component that can be reused (e.g. with class name `.nav`)
2. **Element:** a child within a block that cannot be used separately from that block (e.g. with class name `.nav__item`)
3. **Modifier:** a variation in the style of either a block or modifier (e.g. with class name `.nav--dark`)

Let's dive into some real CSS examples to get a hang of this thing.

## **Blocks**

Blocks are reusable components. Like buttons, cards or form fields.

When naming your blocks, focus on describing its purpose (i.e. what it is) rather than its state (i.e. what it looks like).

For example, `.btn` or `.nav` follows the correct naming convention for a block.

`.big` or `.bright-pink` describes how it looks, so doesn't scale well when you want to change the design later on.

```html
<!-- INCORRECT -->

<div class="large-red-box">
 <img src="...">
 <h2>...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .large-red-box {}
</style>
```

```html
<!-- CORRECT -->

<div class="card">
 <img src="...">
 <h2>...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card {}
</style>
```

If you're wondering how to place blocks within blocks (for example, a button inside a nav), [here's a short article](https://scalablecss.com/bem-blocks-within-blocks/) to help you with that.

## **Elements**

Inside blocks are where elements live. Elements are dependent on their parent block, and so cannot be used without them.

Elements also have a unique CSS class naming convention which works like this:

`.block__element`

For example, using the `.card` component, an element inside the card component (like an image) would have a class name like `.card__img`.

The element name always appends the block name, separated by a double underscore `__`.


```html
<!-- INCORRECT -->

<div class="card">
 <img src="...">
 <h2>...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card {}
 .card img {}
 .card h2 {}
 .card p {}
 .card a {}
</style>
```

```html
<!-- CORRECT -->

<div class="card">
 <img class="card__img" src="...">
 <h2 class="card__title" >...</h2>
 <p class="card__description" >...</p>
 <a class="card__button">...</a>
</div>

<style>
 .card {}
 .card__img {}
 .card__title {}
 .card__description {}
</style>
```

It's important to note that the second code snippet avoids using more than 1 selector to target the styles (e.g. like `.card img {}`).

It's considered best practice to use a BEM element class and use that directly instead (like `.card__img {}`).

Following this approach reduces the chance of [cascade issues](https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/) down the line.

## **Modifiers**

When you have varying styles in blocks (or elements), that's where modifiers come in. 

For example, your 'card' block might have a light and dark version. Or you might have primary and secondary buttons.

Modifiers have a unique CSS naming convention which works like this:

`block--modifier` or `block__element--modifier`.

That's right- BEM modifiers can be applied to both blocks and elements.

Let's dive into some bad and good practices:

```html
<!-- INCORRECT -->

<div class="card--dark">
 <img src="...">
 <h2 class="card__title--large">...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card--dark {}
 .card__title--large {}
</style>
```

It's considered bad practice to use a modifier class in isolation (i.e. without the block or element class).

That's because the modifier is meant to add incremental style changes to the block.

Therefore, whenever using a modifier, ensure it's used with the base class:

```html
<!-- CORRECT -->

<div class="card card--dark">
 <img src="...">
 <h2 class="card__title card__title--large">...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card {}
 .card--dark {}
 .card__title {}
 .card__title--large {}
</style>
```

And that's it!

Those are the fundamentals to get you off and running with BEM.

If you're interested to learn more about the 'why' behind BEM, I recommend checking out [this CSS Tricks article](https://css-tricks.com/bem-101/).

Like learning anything new, practicing is key. Give BEM a shot in your next project and see where it takes you!

---

## **Download Free BEM Cheat Sheet**

Want to start practicing BEM and looking for a no-nonsense, quick start action guide?

[Download a free cheat sheet](https://scalablecss.com/resource/bem-cheat-sheet) covering BEM basics so you can dive in and start practicing today.

---