¿Qué es la metodología BEM?

BEM (Bloque, Elemento, Modificador) — es una metodología de nombramiento de clases en CSS para crear código escalable y mantenible. Su objetivo es hacer que los componentes sean independientes, reutilizables y fáciles de modificar.

Principios básicos:

Bloque: Componente independiente, con un nombre único. Puede contener elementos y otros bloques.
```
<div class="card">...</div>
```
Elemento: Parte del bloque que no tiene significado independiente fuera del contexto del bloque. El nombre del elemento se separa del nombre del bloque mediante dos guiones bajos (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modificador: Añade estado o cambia la apariencia/comportamiento del bloque o elemento. El nombre del modificador se separa del nombre del bloque o elemento mediante dos guiones (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Ventajas:

Legibilidad: Las clases son fáciles de entender, se ve la estructura del componente.
Reutilización: Los componentes son independientes y pueden usarse en diferentes partes del proyecto.
Mantenibilidad: Los cambios en un componente afectan mínimamente a otros.
Escalabilidad: Adecuado para grandes equipos y proyectos.

Ejemplo de estructura:

.card {
  /* Estilos del bloque */
}

.card__title {
  /* Estilos del elemento */
}

.card__text {
  /* Estilos del elemento */
}

.card--featured {
  /* Estilos del modificador del bloque */
}

.button {
  /* Estilos del bloque */
}

.button--primary {
  /* Estilos del modificador del bloque */
}

.button--disabled {
  /* Estilos del modificador del bloque */
}