BEM Naming Convention

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS.

Block: Encapsulates a standalone entity that is meaningful on its own.

Elements: Parts of a block and have no standalone meaning. Any element is semantically tied to its block.

Modifiers: Flags on blocks or elements. Use them to change appearance, behavior or state.

// Block level element
.btn {
}

// Elements that depend on the block element
.btn__text {
}

.btn__price {
}

// Modifiers that can be used to change the appearance or state of block elements
.btn--primary {
}

.btn--danger {
}

Example using HTML

<button class="btn">
  <span class="btn__price">$</span>
  <span class="btn__text">32</span>
</button>

<button class="btn btn--primary">
  <span class="btn__price">$</span>
  <span class="btn__text">32</span>
</button>

<button class="btn btn--danger">
  <span class="btn__price">$</span>
  <span class="btn__text">32</span>
</button>