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.
What is BEM
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.
Block
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.
Element
Elements in this example are PostItem__image, PostItem__content, PostItem__date and PostItem__title. Those are parts of block that have no standalone meaning and are semantically tied to its block. So an element of PostItem will be called this way PostItem__element-name.
Modifier
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.
Styling
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.
Don’t be scared of long class names
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.
Conclusion
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.