DEV Community

Cover image for BEM Methodology in CSS
Anuradha Aggarwal
Anuradha Aggarwal

Posted on • Updated on • Originally published at anuradha.hashnode.dev

BEM Methodology in CSS

Hola Friends, In this article we'll learn about BEM Methodology.

BEM

  • BEM divides the layout into 3 main parts: - Block - Element - Modifier

  • It's a CSS naming convention for writing cleaner and more readable CSS classes. BEM also aims to write independent CSS blocks to reuse them later in your project.

  • BEM is ideal for teams of developers on larger projects where designers and developers consistently name components for easier communication between the team members.

  • BEM syntax usually looks like this:

.block__element--modifier

Enter fullscreen mode Exit fullscreen mode

Let's explore this in more detail:

Block

Encapsulates a standalone entity that is meaningful on its own. It is usually a bigger component of a webpage. for example header, card, div, etc.

<div class= "card">
. . .
</div>
Enter fullscreen mode Exit fullscreen mode

Element

It is a part of a block and has no standalone meaning. Any element is semantically tied to its block. It is represented using [block-name](double underscore)[element-name] like card__header.

<div class= "card">
    <div class= "card__header">
         . . .
    </div>

    <div class= "card__body">
         . . . 
    </div>
</div> 
Enter fullscreen mode Exit fullscreen mode

In the above example, card__header & card__body represents the Elements which resides inside the Block card.

Modifiers

It represents the flags on blocks or elements. Use them to change appearance, behavior, or state.

A modifier is an extension that specifies some change in the style of the block or the element it is applied to.

A modifier is indicated by using double dashes after the class name which allows you to overwrite the styles for a specific type of block, or an element.

<button class="btn btn--active"> Click Me </button>
<button class="btn btn--disabled"> Clicked </button>
Enter fullscreen mode Exit fullscreen mode

In the above code snippet, btn--active & btn--disabled represents the Modifiers.

Corresponding CSS code would be:

.card { ... }
.card__header { ... }
.card__body { ... }

.btn { ... }
.btn--active { ... }
.btn--disabled { ... }
Enter fullscreen mode Exit fullscreen mode

In case you are using some CSS preprocessor, you can modify your CSS file in the following way:


.card {
    &__header { . . . }
    &__body { . . . }
}

.btn {
    &--active { . . . }
    &--disabled { . . . }
}
Enter fullscreen mode Exit fullscreen mode

BEM makes our CSS easier to read, helps to write clean code, and also saves a lot of time to decide the class name.

References

Wrap Up!!

Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter

Buy-me-a-coffee

Top comments (0)