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 disorganization 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, organized 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.
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:
<div class="PostItem">
<div class="PostItem__image"></div>
<div class="PostItem__content">
<p class="PostItem__date">2018 June 28</p>
<p class="PostItem__title">How to accelerate your growth as a developer</p>
</div>
</div>
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 flagon 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:
.PostItem {
box-shadow: 0px 70px 40px -67px rgba(0, 0, 0, 0.2), 0px 3px 20px rgba(0, 0, 0, 0.1);
width: 30%;
border-radius: 20px;
overflow: hidden;
margin-top: 50px;
transition: all .2s ease-in-out;
text-decoration: none;
}
.PostItem--tilted {
box-shadow: 0px 70px 40px -50px rgba(0, 0, 0, 0.2), 0px 3px 20px rgba(0, 0, 0, 0.1);
}
.PostItem__content {
padding: 29px;
color: #000;
}
.PostItem__date {
margin: 0;
font-weight: bold;
color: #5e5e5e;
letter-spacing: 0.2px;
font-size: 12px;
}
.PostItem__title {
margin-top: 8px;
font-weight: 600;
color: #252525;
font-size: 21px;
line-height: 1.4;
}
.PostItem__title {
background-size: cover;
background-position: center center;
height: 162px;
width: 100%;
display: block;
}
Hopefully you can already see how powerful this is. It already looks very organized, 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.
.PostItem {
box-shadow: 0px 70px 40px -67px rgba(0, 0, 0, 0.2), 0px 3px 20px rgba(0, 0, 0, 0.1);
width: 30%;
border-radius: 20px;
overflow: hidden;
margin-top: 50px;
transition: all .2s ease-in-out;
text-decoration: none;
&__content {
padding: 29px;
color: #000;
}
&__date {
margin: 0;
font-weight: bold;
color: #5e5e5e;
letter-spacing: 0.2px;
font-size: 12px;
}
&__title {
margin-top: 8px;
font-weight: 600;
color: #252525;
font-size: 21px;
line-height: 1.4;
}
&__image {
background-size: cover;
background-position: center center;
height: 162px;
width: 100%;
display: block;
}
}
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:
<div class="PostItem__content PostItem__content--featured PostItem__content--frontpage"></div>
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 organized, readable, flexible, adaptable and extendable. Also refactoring your style code is way more simple.