BEM CSS Architecture

Hey Guys,Today i am going to talk about css BEM architecture.BEM stands for Block,Element,Modifiers.Three separated words.BEM is nothing but class naming convention.

<div class="card"> Modifiers <div class="card__header"></div> <div class="card__body"></div> <button class="card__button--red"></button> </div> 

In above code you can see we have a card div.Here card is B => block and card__body,card__header all of those are 'E => element'.Yes,you just write block name add __ and write element name.Here card__button--red is our M => modifier.you add -- with element and write modifiers name.

BEM has good use cases.It helps a lot while writing css code specially while writing css pre-processor sass/scss code.Take a look.

.card { &__header {} &__body {} &__button--red {} } 

Wow nice combination .Right?

If you are not using this try it today.This will make you life easier.

Thanks ❤