# 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 */
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wplake.gitbook.io/advanced-views/templates/css-and-js/bem-methodology.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
