DEV Community

sadiul hakim
sadiul hakim

Posted on

3 2

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>
Enter fullscreen mode Exit fullscreen mode

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 {}
}
Enter fullscreen mode Exit fullscreen mode

Wow nice combination .Right?

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

Thanks ❤

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
astriskit profile image
H S

👍

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay