[CSS] BEM (Block Element Modifier)

Overview

BEM is a methodology that helps you to create reusable components and code sharing in web FE development.

CSS codes developed without any structure or naming conventions leads to an unmaintainable in the long term.

The advantages of BEM are modularity, reusability, and structure. So if we follow the BEM method, it allows us to solve these problems.

Block

A standalone entity that is meaningful on its own.

Element

A part of a block that has no standalone meaning and is semantically tied to its block.

Modifier

A flag on a block or element. This is used to change appearance or behavior.

Naming Convention

HTML Side

The BEM only uses the class attribute.

The class name may consist of Latin letters, digits, and dashes.

The class name can have a short prefix for namespacing.

<!-- Example -->
<div class="block">
  <div class="block__element">
    <div class="block__element--modifier">
    </div>
  </div>
</div>

<form class="form">
  <button class="form__btn--big">Big Button</button>
  <button class="form__btn--small">Small Button</button>
</form>

CSS Side

Use class name selector only.

/* Example */
.form {
  font-size: 16px;
}

.form__btn--big {
  width: 5rem;
}

.form__btn--small {
  width: 3rem;
}