What is a CSS class naming convention?

Why do we need a naming convention?

Naming conventions make our code more readable, organized, and searchable. BEM is a protocol that exists for naming CSS classes.

About BEM

BEMshort for Block Element Modifier is a convention maintained to help you organize your code and reduce the overall CSS footprint. This, in turn, results in greater efficiency across the board.

The BEM protocol is divided into three components:

• Block - Encapsulates a standalone entity that is meaningful on its own.
• Element - Parts of a block that have no standalone meaning.
• Modifier - Flags on blocks or elements.

Let’s look at an example of a car to understand the above components.

Block

Blocks are individual entities independent of other entities. This individuality enforces modularitywhen you focus on defining all of your CSS’s major elements as blocks. It is also easier to transfer a complete block from one project to another.

Blocks are named with a hyphen in between. This maintains consistency with general CSS property names. For example, we would name our car’s parent block car-body:

.car-body{
    --class-item-bg: black;
    margin: auto;
    position: relative;
    height: 100px;
    width: 200px;
    background-color:  var(--class-item-bg);
}

Here, we have made a class for our car’s body. It’s a black rectangle centered along the margins:

Element

Unlike a block, an element cannot be a standalone entity. An element is a child/sub-part of an already existing block. Elements are used to refine the blocks and give them structure. Elements follow the naming convention given below:

{block name} + __ + {element name}

Going back to our example, our car needs four parts: bonnet, trunk, right wheel, and left wheel. Here is how we would incorporate our elements with an existing block:

.car-body{
    --class-item-bg: black;
    margin: auto;
    position: relative;
    height: 100px;
    width: 200px;
    background-color:  var(--class-item-bg);
}

.car-body__trunk {
    height: 50px;
    width: 100px;
    background-color:  var(--class-item-bg);
    position: absolute;
    left: -100px;
    top: 50px;
}
.car-body__bonnet {
    height: 50px;
    width: 100px;
    background-color:  var(--class-item-bg);
    position: absolute;
    right: -100px;
    top: 50px;
}
.car-body__rightwheel {
    height: 50px;
    width: 50px;
    background-color: grey;
    border-radius: 50%;
    position: absolute;
    left: 150px;
    top: 75px;
}
.car-body__leftwheel {
    height: 50px;
    width: 50px;
    background-color: grey;
    border-radius: 50%;
    position: absolute;
    top: 75px;
}

The bonnet and trunk elements are smaller rectangles shifted relative to the main rectangle. Similarly, the wheels are circles shifted relative to the main rectangle.

The key thing to notice in the code above is how the elements’ names follow the name of the block they are associated with. This allows for the instant identification of related classes.

Modifier

A modifier is a variation of our existing object. Modifiers help you create duplicates of already existing blocks with a couple of modified properties (e.g., you can have a block for the button). Modifier classes come in handy when you need the same button but in three different colors. Modifiers follow the naming convention given below:

{block name} + -- + {modifier name}

Now, what if, instead of just one black car, we needed a blue and a red car too? Let’s add two more cars:

.car-body--black{
    --class-item-bg: black;
    margin: auto;
    position: relative;
    height: 100px;
    width: 200px;
    background-color:  var(--class-item-bg);
}

.car-body--red{
    --class-item-bg: tomato;
    margin: auto;
    position: relative;
    height: 100px;
    width: 200px;
    background-color:  var(--class-item-bg);
}

.car-body--blue{
    --class-item-bg: cyan;
    margin: auto;
    position: relative;
    height: 100px;
    width: 200px;
    background-color:  var(--class-item-bg);
}

In the code above, all three of the car-body classes are entirely the same except the background-color property. Each of them has a different background color assigned to them via --class-item-bg variable. The distinguishing feature is highlighted in the name of the modifier.