Metodología BEM en CSS explicada

La metodología BEM (bloque, elemento, modificador) es una de las convenciones de nomenclatura más usadas para escribir CSS limpio, mantenible y escalable. Si trabajas con HTML y CSS y quieres que tu código se lea fácil, esta guía te muestra cómo funciona BEM con ejemplos prácticos, incluyendo una analogía con el cohete Falcon 9.

¿Qué es BEM y cómo funciona en CSS?

BEM es el acrónimo de tres piezas que ordenan tu código: bloque, elemento y modificador. Cada pieza cumple un rol distinto y juntas forman una convención de nombres que cualquier persona del equipo puede leer sin perderse [0:14].

El bloque es el contenedor principal, esa estructura grande que vive por sí sola. El elemento son las partes internas que dependen del bloque. Y el modificador describe variaciones o estados, tanto del bloque como del elemento [2:01].

¿Qué significa BEM en desarrollo web? Es una metodología de nomenclatura para CSS que separa tu código en bloques (contenedores), elementos (partes internas) y modificadores (variaciones o estados).

¿Cómo se aplica BEM con la analogía del Falcon 9?

Imagina el Falcon 9 como tu pieza de código. El cohete completo es el bloque. La cabecita superior, que puede ser fairing o Dragon, representa al modificador porque son variaciones de esa misma parte. Y piezas como second stage o inner stage son los elementos que componen al cohete [2:42].

Llevado a HTML y CSS, un bloque puede ser una card, un botón, un formulario, un navbar o un footer. Los elementos serían íconos, textos, ítems de lista, imágenes o inputs. Los modificadores se relacionan con pseudoclases o estados: activo, inactivo, hover, seleccionado, rojo, verde [3:48].

¿Cómo escribir clases con la convención BEM?

La nomenclatura sigue un patrón muy específico que conviene memorizar. Los guiones bajos dobles separan el bloque del elemento, y los guiones medios dobles separan al bloque o al elemento de su modificador [8:09].

Las combinaciones más comunes son estas:

• bloque__elemento para nombrar partes internas.
• bloque--modificador para variaciones del bloque.
• elemento--modificador para variaciones de un elemento.
• bloque__elemento--modificador cuando mezclas los tres.

Aplicado al Falcon 9, tu HTML tendría una clase principal falcon-9 para el cohete, falcon-9--dragon cuando uses la variación con Dragon, y por dentro elementos como falcon-9__stage. En un caso real, un botón se vería así:

html <button class="button button--active"> <span class="button__icon"></span> <span class="button__text">Enviar</span> </button>

¿Puedes modificar la convención de guiones en BEM?

Sí, BEM es flexible. Puedes usar un solo guion medio para el modificador o jugar con la cantidad de guiones, siempre que respetes una regla de oro: sé consistente dentro del proyecto. Si trabajas en equipo, todos deben usar la misma forma de escritura para que la nomenclatura no se rompa [9:35].

¿Qué separan los guiones en BEM? Los guiones bajos (__) separan el bloque del elemento. Los guiones medios (--) separan al bloque o elemento de su modificador.

¿Por qué usar BEM en proyectos reales?

A primera vista, escribir card__title--highlighted se siente más engorroso que un simple title. Pero el valor de BEM aparece cuando los proyectos crecen y el HTML deja de ser pequeño [10:36].

Estas son las razones para adoptar la metodología:

• Legibilidad: al leer una clase entiendes de inmediato qué hace y a qué bloque pertenece.
• Mantenibilidad y escalabilidad: tu CSS se mantiene limpio aunque el proyecto crezca.
• Modularidad: organizas tus estilos en módulos independientes en lugar de un mar de CSS gigante.
• Sin anidamientos profundos: evitas selectores dependientes unos de otros, alineándote con principios como SOLID, DRY e Immutability [12:00].

Esa modularidad se nota cuando combinas BEM con un preprocesador como SASS, donde puedes encapsular bloques completos en archivos pequeños y reutilizables.

¿Para qué tipo de proyectos sirve BEM?

Funciona en proyectos pequeños, pero brilla en estructuras grandes con muchos componentes. Cuando un card tiene cinco elementos internos y tres estados distintos, BEM evita que tu CSS se convierta en una telaraña imposible de mantener.

Ahora te toca a ti: escoge un objeto que te guste, identifica cuál sería el bloque, cuáles los elementos y cuáles los modificadores, y compártelo en los comentarios. Si te animas a escribir el HTML con la convención BEM, mucho mejor.