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 ❤

Comments

[H S]

👍