What is the BEM methodology?

BEM (Block, Element, Modifier) is a methodology for naming classes in CSS to create scalable and maintainable code. Its goal is to make components independent, reusable, and easily changeable.

Main principles:

Block: An independent component with a unique name. It can contain elements and other blocks.
```
<div class="card">...</div>
```
Element: A part of a block that has no standalone meaning outside the block context. The element name is separated from the block name by two underscores (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modifier: Adds a state or changes the appearance/behavior of a block or element. The modifier name is separated from the block or element name by two hyphens (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Advantages:

Readability: Classes are easy to understand, showing the component structure.
Reusability: Components are independent and can be used in different parts of the project.
Maintainability: Changes in one component minimally affect others.
Scalability: Well-suited for large teams and projects.

Example structure:

.card {
  /* Block styles */
}

.card__title {
  /* Element styles */
}

.card__text {
  /* Element styles */
}

.card--featured {
  /* Block modifier styles */
}

.button {
  /* Block styles */
}

.button--primary {
  /* Block modifier styles */
}

.button--disabled {
  /* Block modifier styles */
}