BEM Methodology Overview and Naming Conventions

BEM or Block Element Modifier is a naming convention used to help organize your code base. In this article, I discuss the uses for with in your CSS projects. For a more detailed look into BEM, feel free to read through the documentation found here.

Block

So what is a block? Basically a block is a higher level element used to define a section’s purpose. You can think of a block as a reusable grouping of code that you will identify by a class name. For instance you may have a div that holds a single product’s specific data. We’ll call this div.product

1

2

3

<div class="product">

</div>

If your block name consists of more then 1 word, you’d separate them by dash – block-name.

Block names should never describe the appearance.

Nesting Blocks

You can nest your blocks any number of levels deep. For example, lets create a block that holds all of our product blocks.

1

2

3

4

5

6

7

<!--Block-->

<div class="product-list">

<!--Nested Block-->

<div class="product">

</div>

</div>

Element

Within each product we’ll want to set a few elements. Elements, similar to blocks describe the purpose. The names should never be describing the appearance, but more the idea of what information will go within each section. For instance, we’ll create the following 3 elements within our product block.

Product Name

Product Price

Link For More Details

Each element when using the BEM Methodology should be named starting with the name of the Block followed by 2 underscores and then the name of the element itself. block-name__element-name

Here’s our new example with the 3 specified elements.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="product">

<div class="product__name">

Test Name

</div>

<div class="product__price">

$20.00

</div>

<aclass="product__link"href="#">

Details

</a>

</div>

Nesting Elements

Just like blocks, you can also nest elements within each other. One thing to note, is that a element can only be apart of a block. Never another element. Meaning you cannot define a hierarchy when creating the class names for your elements.

For instance, this is invalid block-name__element-name__element-name

Your element names should only ever be in the format of block-name__element-name

Modifier

Lastly we have our modifiers, which describe the appearance of either elements or blocks. A modifier could be viewed as changing the default behavior of a particular block or element. Lets say we want one of our products to be featured and stand out with a background color. We can simply make a modifier class of .product_is-featured.

Note that a modifier is named using the Block or Element name followed by a single underscore and the name of the modifier. block-name_modifier-name

Here’s an example with a Product block that is featured.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="product product_is-featured">

<div class="product__name">

Test Name

</div>

<div class="product__price">

$20.00

</div>

<aclass="product__link"href="#">

Details

</a>

</div>

One important thing to note is that a modifier cannot be used outside the context of its owner (block or element).

Double Dash Instead of the Single Underscore

You may also come across a few other naming conventions for modifiers which are perfectly acceptable.

With some projects you’ll see the use of the double dash when separating a block or element from its modifier. For instance, using the example from the above, here’s how you would see it using the double dash syntax.

Tags

About This Blog

I'm writing this blog in order to share what I'm learning with the world. Since you learn best by teaching others and writing things down, I figured this would be the best way to really tackle any new technologies I plan on learning. I hope this blog will help you as much as it will benefit me.