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

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

<!-- 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.

1. Product Name
2. Product Price
3. 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.

<div class="product">
    <div class="product__name">
        Test Name
    </div>
    <div class="product__price">
        $20.00
    </div>
    <a class="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-nameelement-nameelement-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.

<div class="product product_is-featured">
    <div class="product__name">
        Test Name
    </div>
    <div class="product__price">
        $20.00
    </div>
    <a class="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.

<div class="product product--is-featured">
</div>

You can read more about the naming conventions here.

File Structure

When writing your CSS, you may be using a tool such as Stylus or SASS which in that case it will be easy for you to break out each of the blocks and elements into their own files.

1. A block should always be within its own directory. In the case of our Product block, we’d simply create a product directory.
2. The elements of a block should be inside of the block’s directory as their own directories. For instance, the product name element should have a directory for __name.
3. Within each elements directory, you’d have the CSS file for that element. For instance for our product name we’d have a file for product__product-name.css Your file extensions may vary depending on the tools you’re using.
4. Modifier directories would be named starting with the single underscore. For instance _is-featured

This is the recommended file structure, but you’re free to organize your project how you like if this doesn’t seem like a good fit for you.