BEMin' with SCSS

Block, Element, Modifier methodology is a popular naming conventions for your CSS classes. It was developed by the team at Yandex.

The name says it all, it breaks the components' classes into three groups :

  • Block : The root of your component.
  • Element : A component that is part of your block.
  • Modifier : An alteration or extension of your block

An element is delimited by two underscores __, while a modifier is delimited by two hyphens --.

One thing with BEM though is writing these class names. It might become tedious, however if you're using Sass or Scss, luckily you will not have to worry about this.

With Sass 3.3+, the parent selector was revamped to provide support to BEM-style class names.

So it goes like this,

//here article is your root component

.article{
 background: #f6f6f6;
 
//content is part of the article component
 
 &__content{
  text-align: center;
  color: #555;
 }

//let's say for example you have a featured article and you want to add a border to it.

 &--featured{
  border: 1px solid #ff8484;
 }

}

And it will compiled to the following

.article{
 background: #f6f6f6;
}
.article__content{
 text-align:center;
 color: #555
}
.article--featured{
 border: 1px solid #ff8484;
}

You can also use variables to store your root and then use it. I personally prefer the above method. It's pretty straight-forward.

Easy peasy

Have fun writing beautiful codes. :-)

Humeira Diljore

Humeira Diljore

Developer, lives on a little island call Mauritius in the Indian Ocean. These days, can often be found battling monsters & running around Hyrule.

Read More