metodología BEM en CSS: Aprende a organizar tu código CSS

Si alguna vez te has liado creando las clases CSS con clases que se pisan entre sí, nombres confusos o te ha costado mantener y escalar tu código , entonces necesitas conocer BEM. Esta metodología te ayuda a escribir CSS limpio, claro y mantenible. En esta entrada te explico qué es BEM, por qué usarlo y cómo aplicarlo con ejemplos. Vamos a ello.

BEM es un acrónimo de Block – Element – Modifier, una metodología propuesta por el equipo de Yandex para escribir clases CSS de forma estructurada y predecible.

Su objetivo es hacer que el código CSS sea más:

• Reutilizable
• Escalable
• Mantenible
• Comprensible para cualquier desarrollador que lo lea

Veamos un ejemplo de qué significa cada parte del nombre:

Block (Bloque)

Representa un componente independiente y autónomo. Puede ser un botón, un formulario, una tarjeta, etc.

<div class="card">Contenido</div>

Element (Elemento)

Es una parte del bloque que no tiene sentido por sí sola. Está ligado al bloque.

Sintaxis: bloque__elemento

<div class="card">
  <h2 class="card__title">Título</h2>
  <p class="card__text">Texto de ejemplo</p>
</div>

Modifier (Modificador)

Define una variación del bloque o del elemento. Puede cambiar su apariencia, estado o comportamiento.

Sintaxis: bloque--modificador o bloque__elemento--modificador

<button class="button button--primary">Aceptar</button>
<button class="button button--secondary">Cancelar</button>

¿Por qué usar BEM?

BEM aporta muchas ventajas en el desarrollo web:

✅ Evita conflictos de estilos (clases únicas y claras)
✅ Facilita el trabajo en equipo (estructura predecible)
✅ Mejora el mantenimiento (cambios localizados)
✅ Escala bien en proyectos grandes

Ejemplo completo de BEM

Supongamos que tienes una tarjeta de producto con título, imagen, descripción y un botón:

HTML:

<div class="product-card product-card--featured">
  <img src="img.jpg" alt="Producto" class="product-card__image">
  <h2 class="product-card__title">Nombre del producto</h2>
  <p class="product-card__description">Descripción corta.</p>
  <button class="product-card__button product-card__button--buy">Comprar</button>
</div>

CSS:

.product-card {
  border: 1px solid #ccc;
  padding: 1rem;
}

.product-card--featured {
  border-color: gold;
}

.product-card__image {
  width: 100%;
}

.product-card__title {
  font-size: 1.5rem;
}

.product-card__button {
  padding: 0.5rem 1rem;
}

.product-card__button--buy {
  background-color: green;
  color: white;
}

🧩 Comparación con estilos tradicionales

Antes (sin metodología clara):

<div class="box item active">Contenido</div>

Difícil de saber qué hace cada clase y de dónde viene.

Después (con BEM):

<div class="menu__item menu__item--active">Contenido</div>

Más claro al identificar el item del bloque menu, y su estado activo.

💡 Buenas prácticas al usar BEM

• Usa guiones bajos dobles (__) para elementos y dobles guiones (--) para modificadores.
• Usa nombres descriptivos y consistentes. Ayudará a entender mejor a que bloque y elemento pertenece cada clase.
• No abuses de los modificadores. Si ves que empiezas a poner demasiados modificadores, puede ser señal de que necesitas crear un nuevo bloque o replantear tu estructura.

¿Tú cómo organizas tus clases?

Si tienes sugerencias, dudas o críticas para mejorar esta entrada, los comentarios son todo tuyos.