Metodología BEM

¿Qué es BEM?

BEM es una metodología de nomenclatura para clases CSS que ayuda a escribir código más estructurado, predecible y mantenible. Las siglas significan:

• Block → el componente base (button)
• Element → una parte interna del bloque (button__icon)
• Modifier → una variación del bloque o elemento (button--primary)

BEM evita conflictos, mejora la legibilidad y permite que otros desarrolladores comprendan más fácilmente la estructura de tu código.

Sintaxis

.block {}
.block__element {}
.block--modifier {}

• Usa __ para separar el elemento del bloque.
• Usa - para indicar un modificador de bloque o de elemento.

Ejemplo básico

HTML:

<button class="button button--primary">
  <span class="button__icon"></span>
  <span class="button__label">Send</span>
</button>

CSS:

.button {
  padding: 1rem 2rem;
  border-radius: 8px;
  background-color: red;
}

.button--primary {
  background-color: #1d284e;
  color: white;
}

.button__icon {
  margin-right: 0.5rem;
}

.button__label {
  font-weight: bold;
}

¿Por qué usar BEM?

• Reduce colisiones de clases.
• Facilita el mantenimiento en proyectos grandes.
• Es muy fácil de escalar.
• Hace que la estructura sea autoexplicativa (semántica).

Buenas prácticas

• Nombra los bloques por el propósito, no por el aspecto. (✅ card, ❌ blue-box).
• No abuses de los modificadores; si hay muchos, quizás es otro bloque.

Gotchas comunes y cómo resolverlos

Anidación excesiva de elementos

A veces se tiende a escribir elementos muy anidados dentro de un bloque, como:

Ejemplo problemático:

<div class="card">
  <div class="card__header">
    <div class="card__header__title">Title</div>
  </div>
</div>

Esto rompe la lógica de BEM, porque los elementos no deben anidarse de esa manera.

Solución recomendada:

<div class="card">
  <div class="card__header">
    <div class="card__title">Title</div>
  </div>
</div>

¿Por qué funciona mejor?

• card__title pertenece directamente al bloque card, no al elemento header.
• Evita combinaciones como card__header__title que dificultan la lectura y mantenimiento.

Regla general: los elementos siempre se relacionan directamente con el bloque, no con otros elementos.

¿Cuántos bloques deben existir por componente?

Lo ideal es un bloque por componente funcional. Si necesitas otro nivel de abstracción, probablemente estás ante otro bloque.

¿Cuántos niveles de __ puedes usar?

Sólo uno (deberías). Evita clases como form__group__label. En su lugar:

<div class="form">
  <div class="form__group">
    <label class="form__label"></label>
  </div>
</div>

¿Cuándo usar modificadores?

Usa modificadores (--) solo para cambiar estilos del mismo bloque, por ejemplo:

<div class="alert alert--error"></div>
<div class="alert alert--success"></div>

No los uses para crear nuevas variantes radicalmente diferentes. Si cambia la funcionalidad, probablemente es otro bloque.

Recursos útiles

• Guía oficial de metodología BEM
• BEM en la documentación de CSS Tricks
• Guía visual de BEM por 9elements