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

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

• http://getbem.com/naming/

• https://9elements.com/bem-cheat-sheet/

Wrap Up!!

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

LinkedIn Twitter