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 ❤
Top comments (1)
👍