# BEM Methodology

{% hint style="info" %}
BEM stands for Block, Element, Modifier, and it is a methodology for naming and structuring CSS classes in a clear and consistent manner.
{% endhint %}

[BEM](https://getbem.com/) 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](https://getbem.com/introduction/) than others.

Below you can find the overview or read about [BEM naming](https://getbem.com/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.

```css
.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.

```css
.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.

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

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