Developer Blog

Developer Blog

BEM Methodology

BEM Methodology

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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

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>

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>

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>

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 { ... }

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


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

.btn {
    &--active { . . . }
    &--disabled { . . . }
}

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

 
Share this