DEV Community

Cover image for BEM Methodology in CSS
Anuradha Aggarwal
Anuradha Aggarwal

Posted on • Updated on • Originally published at

BEM Methodology in CSS

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


  • 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:


Enter fullscreen mode Exit fullscreen mode

Let's explore this in more detail:


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


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 class= "card__body">
         . . . 
Enter fullscreen mode Exit fullscreen mode

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


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.


Wrap Up!!

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

LinkedIn Twitter


Top comments (0)