What is BEM? And Why you should use it in your project.
Introduction
CSS is a language that is easy to learn but very hard to maintain. As the project grows larger, without proper structure, maintaining CSS is unbearable. People have come up with different types of solutions to this such as OOCSS, SMACSS, and BEM. Currently, BEM is the most widely used, it’s unique naming method makes CSS to maintain. Without further a due, let’s start learning BEM.
BEM is a naming styling that is created by Yandex (think of them as Russia’s Google). The problem BEM is trying to solve is the naming problem and structure that CSS often run into. BEM also provides a better structure for your CSS code and scalable CSS.
Basics
BEM stands for Block Element, Modifiers. Let me know you with an easy example.
Let’s say we want to build a card component. The block would be .card. Then any sections within card would be elements. So in this example, we have image, description, button. BEM naming convention connects block and element with two underscores ex. card__image. Finally, we have two different types of buttons, success and back. We call these modifiers and we connect them with our element with two dashes, for example .car__button — success.
.card {}
.card__image {}
.card__description {}
.card__button--success{}
.card__button--back {}Pros & Cons
BEM provides a modular structure to your CSS project. Because of its unique naming scheme, we won’t run into conflicts with other CSS names. BEM also provides a relationship between CSS and HTML. Ambiguous names are hard to maintain in the future.
The main hold back for BEM is that sometimes we wind up with very LONG names. However, if you are using SASS precompiler, this may not be so bad because we can use nesting. Here is an example.
// SCSS
.card {
&__image {}
&__description {}
&__button {
&--success{}
&--back{}
}
}// CSS.card__image {}
.card__description {}
.card__button--success{}
.card__button--back {}
Overall, BEM is my favourite CSS naming scheme, and I strongly suggest you to try using it. It will save you SOOO much debugging time in the future. Hopefully, you find this article useful, If so please give me a medium clap. 👏👏
Reference & Resources