La metodología BEM en CSS te ayuda a nombrar clases de forma estructurada para que tus estilos no se pisen entre sí cuando el proyecto crece. Es ideal para quienes ya dominan selectores básicos y quieren escalar su código con orden.

BEM significa Block, Element y Modifier. Esa estructura define cómo escribes cada clase: si estás dándole estilo a un bloque completo, a un elemento dentro de ese bloque o a una variación específica de cualquiera de los dos. Y aquí viene lo interesante: una vez que entiendes la lógica, leer un CSS ajeno se vuelve mucho más rápido.

¿Qué significa BEM y cómo se estructura?

Piensa en una tarjeta de producto. Esa tarjeta es tu bloque. Dentro tienes un título, un precio y unos botones: esos son los elementos. Y si un botón puede estar deshabilitado o la tarjeta puede destacarse como featured, esos comportamientos son los modificadores.

La convención de escritura es estricta y por eso funciona [1:30]:

• Bloque: .card.
• Elemento: .card__title con doble guion bajo.
• Modificador: .card--feature con doble guion medio.

¿Qué es BEM en CSS? Es una metodología de nomenclatura que organiza tus clases en bloques, elementos y modificadores para evitar que los estilos se sobrescriban entre sí.

¿Cómo aplicar BEM a un bloque y sus elementos?

El bloque es el contenedor padre. En el ejemplo, .card recibe los estilos base que comparten todas las tarjetas [3:20]:

• border: 2px solid #333 para delimitar visualmente.
• padding: 20px para dar aire interno.
• margin-bottom: 20px para separar tarjetas entre sí.
• max-width: 300px para controlar el crecimiento.

Después entras a los elementos internos. Cada uno se nombra con el bloque seguido de doble guion bajo y el nombre del elemento. Para el título usas .card__title y le aplicas color: #333 junto con un margin-bottom: 50px para separarlo del contenido [4:40].

El precio se trabaja con .card__price, donde el font-size: 24px y el font-weight: bold resaltan la información clave, y un margin-bottom: 25px lo separa de los botones [5:30]. Para los botones usas .card__button con un padding: 10px 20px, background-color igual al color principal, color: white, border: none, cursor: pointer y margin-right: 5px para que se separen entre ellos [6:10].

¿Y si el bloque tiene un sub-elemento decorativo?

En la tarjeta también aparece un badge de oferta, que se nombra como .card__badge. Recibe un background: red, color: white, padding: 3px 8px y un font-size: 12px para que funcione visualmente como una etiqueta destacada [7:20].

¿Cómo se escriben los modificadores en BEM?

Los modificadores describen variaciones. Y la diferencia visual con los elementos es clave: en lugar de doble guion bajo, usas doble guion medio.

¿Cuándo uso un modificador en BEM? Cuando un bloque o elemento tiene una variación de estado o estilo, como una tarjeta destacada o un botón deshabilitado.

Para una tarjeta destacada escribes .card--feature y le agregas un border-color: gold con border-width: 3px. Así, ambas tarjetas comparten la base, pero la marcada como feature se diferencia sin duplicar código [8:40].

Para un botón deshabilitado encadenas el bloque, el elemento y el modificador: .card__button--disable. Ahí defines un background-color gris y un cursor: not-allowed, que muestra el ícono de bloqueo cuando pasas el mouse encima [9:50]. Esa señal visual le indica al usuario que ese botón no tiene comportamiento activo.

¿Por qué conviene usar BEM en proyectos grandes?

La lógica detrás de BEM es simple pero poderosa. Al leer una clase como .card__button--disable ya sabes tres cosas: pertenece al bloque card, es el elemento button y está en estado disable. No tienes que rastrear el HTML para entenderlo.

Esto previene colisiones de estilos cuando varios componentes conviven en la misma página. Cada bloque vive en su propio espacio de nombres y los modificadores aíslan las variaciones sin pelear con los estilos base.

¿Ya estás aplicando BEM en tus proyectos o usas otra metodología? Cuéntame en los comentarios qué convención te ha funcionado mejor.