La metodología BEM te ayuda a estructurar HTML y CSS con clases claras, pero solo funciona si identificas bien qué es bloque, qué es elemento y qué es modificador. Aquí verás casos prácticos de BEM en HTML con ejemplos reales y los errores que debes evitar al maquetar componentes como cards, navbars y secciones completas.

¿Cómo identificar bloques, elementos y modificadores en una card?

El primer paso siempre es mirar el componente y preguntarte quién envuelve a quién. En una card sencilla con una imagen y dos párrafos, el bloque es la card, los elementos son la imagen y los textos, y no hay modificadores porque no existen variaciones visuales.

La estructura HTML quedaría así:

html

<div class="card"> <img class="card__image" /> <p class="card__text"></p> <p class="card__text"></p> </div>

Nota que card__image y card__text usan doble guion bajo porque ambos son elementos hijos del bloque, sin importar que sean etiquetas distintas.

¿Qué significa el doble guion bajo en BEM? Separa el nombre del bloque del nombre del elemento. Por ejemplo, en card__image, card es el bloque e image es el elemento que vive dentro de él.

¿Cómo se aplica BEM en un navbar con variaciones de color?

En un navbar con logo, lista de ítems y algunos elementos en gris a la derecha, el bloque es el navbar, los elementos son el logo y los ítems, y el modificador es ese color gris que cambia la apariencia de algunos ítems.

La estructura quedaría con clases como navbar, navbar__item y navbar__icon. Cuando un ítem necesita el color gris, agregas una segunda clase con el modificador:

html

<nav class="navbar"> <ul class="navbar"> <li class="navbar__item"></li> <li class="navbar__icon"></li> <li class="navbar__item navbar__item--gray"></li> </ul> </nav>

El truco está en que el modificador no reemplaza la clase original, sino que la acompaña. Así mantienes los estilos base y solo sumas las variaciones.

¿Qué hacer en estructuras grandes con varios bloques?

En secciones más robustas puedes tener varios bloques conviviendo. Una section con textos e imágenes puede ser un bloque, y dentro puede vivir una lista que es otro bloque independiente con sus propios elementos y modificadores.

La clave es no forzar que todo dependa del bloque más externo. Si una lista tiene su propia identidad visual y se puede reutilizar, merece su propio nombre de bloque.

html

<section class="section"> <div> <p class="section__text section__text--primary"></p> </div> </section>

Reconocer estos patrones antes de escribir código es lo que separa una maquetación ordenada de una que se vuelve inmantenible a las pocas semanas.

¿Cuáles son los errores más comunes al usar BEM?

Hay tres situaciones que se repiten una y otra vez en proyectos reales. Identificarlas a tiempo te ahorra refactorizaciones dolorosas.

Usar el modificador como clase principal

Lo correcto es dejar la clase del bloque y añadir el modificador como clase adicional:

html

<div class="card card--flat"></div>

Lo incorrecto es eliminar la clase base y dejar solo el modificador:

html

<div class="card--flat"></div>

Si haces esto, pierdes los estilos base del bloque y rompes la lógica de variaciones.

Representar los niveles de HTML con BEM

Este es probablemente el error más extendido. BEM solo tiene tres niveles: bloque, elemento y modificador, y no representa la jerarquía del DOM.

Si dentro de un párrafo card__text hay un ícono, ese ícono no se llama card__text__icon. Se llama card__icon, porque sigue siendo un elemento directo del bloque card.

html

<div class="card"> <img class="card__image" /> <p class="card__text"> <i class="card__icon"></i> </p> </div>

¿Por qué BEM no refleja la profundidad del HTML? Porque su objetivo es nombrar componentes según su función, no según su posición en el árbol. Anidar nombres como bloque__elemento__subelemento rompe la convención y vuelve los selectores frágiles.

Omitir clases en hijos que necesitan estilos

Cuando un elemento hijo necesita estilos propios, debe tener su clase BEM. Lo correcto es:

html

<div class="card"> <img class="card__image" /> </div>

Lo incorrecto es apoyarse en selectores de etiqueta dentro del CSS para evitar escribir la clase. Aunque funcione, rompe la consistencia y te obliga a depender del tipo de etiqueta, no del propósito del elemento.

¿Qué buenas prácticas debes mantener al maquetar con BEM?

Antes de escribir una sola línea de HTML o CSS, observa el componente y respóndete tres preguntas:

• ¿Quién es el bloque que envuelve todo y puede reutilizarse?
• ¿Qué elementos viven dentro de ese bloque y dependen de él?
• ¿Hay variaciones visuales que justifiquen un modificador?

Con esas tres respuestas claras, traducir el componente a HTML se vuelve mecánico. Y mantener el código a futuro deja de ser una pesadilla.

¿Qué componente te gustaría descomponer con BEM? Cuéntame en los comentarios cuál es el caso que más te cuesta estructurar.