How To Name Containers And Wrappers In BEM
Tags: css, bem
Published: 2020-02-18 07:20:56

---
description: "What are BEM best practices for the naming conventions of wrapper and container CSS classes? In this article, we'll take a deep dive into answering this question."
canonical_url: https://scalablecss.com/naming-bem-wrappers-and-containers/
---

Are you unclear on [BEM](https://scalablecss.com/bem-quickstart-guide/) best practices for the naming conventions of wrapper and container CSS classes?

For example, you might have multiple blocks and you need to add a wrapper class to style the positioning of those blocks.

![What is BEM best practice for naming wrapper classes?](https://i.imgur.com/rwyzHcz.png)

It becomes difficult to know how to name wrapper and container classes as they fall out of the 'block, element & modifier' mental model.

Let's dive right in and look at ways to solve this.

---

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

---

## **Repeated Wrappers: Airbnb Example**

Here's a screenshot from [Airbnb's](https://airbnb.com) home page:

![Airbnb Experiences](https://i.imgur.com/Jyy4Pl8.png)

Thinking with your BEM hat on, you'll notice:

- Each card can be considered a BEM block (e.g. `.card`)
- A wrapper is required to position the 5 blocks horizontally

Here's how the HTML would be structured following the BEM convention:

```html
<div class="..."> <!-- Wrapper class goes here -->
    <div class="card">
        <img class="card__img" src="..." alt="...">
        <h4 class="card__subtitle">...</h4>
        <p class="card__description">...</p>
        <div class="card__rating">...</div>
    </div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

<style>
    .card {}
    .card__img {}
    .card__subtitle {}
    .card__description {}
    .card__rating {}
</style>
```

In fact, other sections of the Airbnb home page follow a similar structure. For example, the 'Airbnb Plus' section uses 3 columns instead of 5:

![Airbnb Plus](https://i.imgur.com/JapYaYO.png)

So the question is:

What is the BEM best practice naming convention for the wrappers? 

In this case, as there are **repeated** patterns of how the wrappers work, the best approach would be to use a generic wrapper name like `.grid`. 

This allows you to use the wrapper in multiple places as it's not constrained with semantic meaning. 

For example, here's how the HTML could look for the Airbnb Experiences section:

![Airbnb Experiences](https://i.imgur.com/Jyy4Pl8.png)

```html
<div class="grid grid--experiences">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

<style>
.grid {
    display: grid;
    grid-column-gap: 1rem;
}

.grid--experiences {
    grid-template-columns: repeat(5, 1fr);
}

.card {}
</style>
```

And here's the Airbnb Plus section:

![Airbnb Plus](https://i.imgur.com/JapYaYO.png)

```html
<div class="grid grid--plus">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

<style>
.grid {
    display: grid;
    grid-column-gap: 1rem;
}

.grid--plus {
    grid-template-columns: repeat(3, 1fr);
}

.card {}
</style>
```

Using modifiers to tweak the layout, like `.grid--experiences` and `.grid--plus` allows you to use a generic wrapper that can be applied at scale across the design.

Pretty cool, eh?

But you might be thinking...

How about in the example where the wrapper isn't a repeated pattern? 

Like a 1-off design that requires a wrapper to style a collection of BEM blocks?

This will require a slightly different approach...


## **Unique Wrappers: Notion Example**

Take a look at this design from the [Notion.so](https://notion.so) home page:

![Notion.so features](https://i.imgur.com/1so7MDd.png)

Again, thinking with your BEM hat on, you'll notice:

- Each quarter can be considered a BEM block (e.g. `.feature`)
- A wrapper is required to position the 4 blocks

Here's how the HTML could be structured following the BEM convention:

```html
<div class="..."> <!-- Wrapper class goes here -->
    <div class="feature">
        <img class="feature__img" src="..." alt="...">
        <h3 class="feature__title">...</h3>
        <p class="feature__description">...</p>
    </div>
    <div class="feature">...</div>
    <div class="feature">...</div>
    <div class="feature">...</div>
</div>

<style>
    .feature {}
    .feature__img {}
    .feature__title {}
    .feature__description {}
</style>
```

There's an important difference between this example and the previous Airbnb example:

Looking at the design of the entire Airbnb page, it's clear that the layout of each section uses a consistent format, with slight variations (like the number of columns). 

![Airbnb home page layout](https://i.imgur.com/CEztW7f.png)

The Notion feature section, however, is contextually unique. I.e. there are no other similar sections across the website.

Therefore, instead of using a generic naming convention for the wrapper as we did for Airbnb, **a different** naming convention approach is required for the wrapper in the Notion example.

The naming convention best approach would be to use a wrapper specific to the blocks, like `features-wrapper`. 

For example, here's how the HTML could look for the Notion features section:

![Notion.so features](https://i.imgur.com/1so7MDd.png)

```html
<div class="features-wrapper">
    <div class="feature">...</div>
    <div class="feature">...</div>
    <div class="feature">...</div>
    <div class="feature">...</div>
</div>

<style>
.features-wrapper {
    display: grid;
    grid-column-gap: 1rem;
}

.feature {}
</style>
```


## **Conclusion**

So the key to naming wrapper and container classes within the BEM mental model is considering the context:

Is this layout a repeated pattern that can be leveraged in many areas? 

If so, use a generic class name like `.grid` or `.container`.

Or is this layout unique to a collection of blocks?

In this case, use a class name related to the blocks you're positioning. So if you need a wrapper class for a bunch of `.card` blocks, then `cards-wrapper` would work well.

What do you think?

How do you handle containers and wrappers when following the BEM methodology?

---

## **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.