BEM Methodology

circle-info

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

BEMarrow-up-right 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 betterarrow-up-right than others.

Below you can find the overview or read about BEM namingarrow-up-right 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.

Last updated