Using BEM CSS for beginners

Ok, You might have been asking for yourself :

What is BEM? and Why you should use it? 🤔

Cool, I am gonna give you a few insights on why you should use it and how this approach can be very helpful for your project.

BEM (Block, Element, Modifier) makes the development process easier, it allows reusing the code in addition to being modular and scalable when it comes to a large project for instance.

Let’s have a better look-see:

<div class="block__element-modifier"></div>

The example above is probably self-explanatory but I will make it easier for you to understand.

Let’s suppose we have a card block. It might look like at something like this:

HTML

<div class="card">
 <img src="image.jpg" class="card__image" />
 <h2 class="card__title">Our Card Block</h2>
 <a href="#" class="card__button card__button-red">Click here</a>
 <a href="#" class="card__button card__button-blue">Click here</a>
</div>

SASS

.card {
 &__image {
  max-width: 100%;
  height: auto; }
 &__title {
  font-size: 32; }
 &__button {
  display: block;
  
  &-red {
   background-color: red; }
  &-blue {
   background-color: blue; }
 }
}

BEM does not fix everything but it definitely makes your code more readable and less confusing, it is also very powerful when we use SASS and it helps to improve your project becoming more scalable.

I hope this article can help you to understand the basic benefits of using BEM.