Why BEM is Amazing and How Do You Use It

When I started out in web development, I have started like most folks — naming css in the way it made the most sense for me. Because of this I would run into problems like having to think of the name of a class or whatever element I was styling, also in the end when the website or app would get complicated, it would be very hard to name and find CSS classes. I was tired of this disorganisation in my CSS, until I got introduced to BEM, while were working on a project, I’m very grateful for it, so let me introduce it to you today.

At first when I looked at it, it was horrible. I didn’t understand why would anyone use it, because the class names could be extremely long and complicated. But when I started developing with it, in about 2 weeks I got used to it and now I don’t know how I’ve lived without it before.

Now my CSS is looking beautiful, organised and easily editable. All thanks to this methodology. In this article I will introduce this methodology for you and hopefully you will be convinced to try it out and see if you like it.

Note: please note, that I use React in my examples, so classNames are just class attributes.

BEM stands for Block Element Modifier. It is a naming convention. The whole methodology is those 3 concepts you see in the title, let’s get to know them.

Let’s say we have a post that looks like this:

Let’s identify what it consists of. As we see it consists of image, date and title. Now since we would need padding for it, it would be nice to wrap the date and the tile in a div, let’s call it content, so we could add a padding for it. so here is the structure for this article:

This example here consists of one block with 4 elements.

PostItem in this example is a block. Block encapsulates a standalone entity that is meaningful on its own. This is a component that can be reused, copy-pasted.

In this example, modifier would be a flag on a block or element in order to modified appearance, behaviour or state.

So let’s say we would need a PostItem to be more tilted. We would add a flag the block:

So now, given to that in our css we’ve defined .PostItem — tilted to have a bigger shadow, we should see that the card is more tilted.

Now let’s look at how this would look in CSS:

Hopefully you can already see how powerful this is. It already looks very organised, at first glance you can tell exactly what each CSS element represents.

Let’s take it a step further. Let’s introduce SCSS and see how it looks.

Look how beautiful it looks when you nest it in the block.

One of the major concerns I had when I started is the length of the class names. Do not be scared of them. Just always make sure that it makes sense when you read it, some classes could look like this:

As long as the meaning makes sense and it supports the structure, it’s all good.

Hopefully this article convinced you to try it out. This naming methodology will make your style code more organised, readable, flexible, adaptable and expandable. Also refactoring your style code is way more simple.

Related posts:

This article has been migrated to Hashnode, please go ahead and read the updated version of the Graphical Introduction to the Intersection Observer API. The Intersection Observer is a Web API that…

You are a professional robber planning to rob houses along a street. Each house has a certain amount of money stashed, the only constraint stopping you from robbing each of them is that adjacent…

A great product manager uses behavioral science to understand their users and to design products that actually address customer needs.