BEM Methodology

BEM stands for Block, Element, Modifier, and it is a methodology for naming and structuring CSS classes in a clear and consistent manner.

BEM helps in creating maintainable and modular code by providing a naming convention that reflects the relationship and purpose of different parts of the code. Learn why it's better than others.

Below you can find the overview or read about BEM naming on the official website.

Overview

Block

The main component or module that represents a standalone entity on the page. Blocks are defined by a unique class name that describes their purpose.

.block {
  /* styles for the block */
}

Element

Parts of a block that have no standalone meaning and are semantically tied to the block. Elements are indicated by two underscores following the block name.

.block__element {
  /* styles for the element */
}

Modifier

Flags on blocks or elements that modify their appearance or behavior. Modifiers are indicated by two hyphens following the block or element name.

.block--modifier {
  /* styles for the block modifier */
}

.block__element--modifier {
  /* styles for the element modifier */
}