Understanding BEM with simple examples

BEM (aka. Block Element Modifier) CSS naming convention allows you to write more readable and maintainable CSS.

In BEM styles names we use the following convention

block-name__element-name--modifier

In this article, we will try to understand it with some simple examples.

CARD:

Let’s look at the below card image

It contains three sections (Elements) i.e. title section, content section, and footer section. let’s name them.

Easy isn’t it?

Let’s look into another example

Menu:

This menu list has 5 items (elements). And one of them is in a active state (Modifier)

let’s name them

Let’s understand modifiers with one more example.

Link:

In the below image, we have three links and they are in default, active and disabled state respectively.

Class names for them should look like this

Simple right?

Form Fields:

When you have multi-word names we use kebab-case. Let’s see it in this example.

In the above image, we have 2 form fields a textbox with label and error message, and a checkbox with a label.

HTML for above should look something like this

Mixing things:

When you write code in the real world you won’t just be creating single Block components. There will scenarios where you may have to nest multiple Blocks. Like the below example.

In the above image, we are mainly using two components that we saw in previous examples, Card and Form Field (Checkbox).

We perfectly nested our components without duplicating any of our CSS.

That’s it, folks! I hope this helps. Thanks!