Trabajar con BEM (Bloque, Elemento, Modificador) suena sencillo hasta que aparecen los casos reales: componentes anidados, jerarquías profundas de HTML y clases utilitarias para JavaScript. Aquí encontrarás soluciones prácticas a tres problemas frecuentes y cómo potenciar BEM con Sass para escribir CSS más limpio y mantenible.

¿Cómo combinar dos componentes BEM independientes?

Imagina que tienes un componente A (un button con sus clases) y quieres meterlo dentro de un componente B (una card). La duda típica: ¿debes renombrar el botón para que pertenezca a la card?

La respuesta es no. Cada componente conserva sus propias clases y conviven sin problema dentro del mismo HTML.

¿Tengo que crear una clase nueva al anidar componentes en BEM? No. Cada bloque mantiene su nomenclatura original. Un button button--active puede vivir dentro de una card sin que necesites inventar card__button.

Así evitas duplicar reglas y mantienes la independencia de cada bloque, que es justamente lo que BEM busca [02:00].

¿Qué hago si mi HTML tiene más de tres niveles de anidación?

Uno de los errores más comunes es pensar que BEM debe reflejar la estructura jerárquica del HTML. Si tienes padres, hijos, nietos y tataranietos, terminarías con clases interminables como card__footer__text__icon, lo cual va en contra de la metodología.

BEM no representa niveles de anidación del DOM, solo describe la relación entre bloque y elemento. Un nieto sigue siendo un elemento del bloque principal.

• El bloque es card.
• La imagen es card__image, aunque esté dentro de un contenedor.
• El texto del footer es card__footer-text, no card__footer__text.

Mantén siempre máximo dos guiones bajos: bloque y elemento. La profundidad real del HTML no importa para nombrar las clases [03:30].

¿Debo crear modificadores BEM para clases utilitarias?

Si necesitas ocultar varios componentes con display: none desde JavaScript, podrías pensar en crear card--hidden y button--hidden. Pero eso multiplica clases y líneas de código innecesarias.

¿Las clases utilitarias rompen BEM? No. Puedes crear clases independientes a la estructura BEM para propiedades generales como ocultar, mostrar o aplicar utilidades. Una sola clase .hidden { display: none; } sirve para todos los componentes.

Esta práctica reduce el JavaScript necesario, porque solo agregas o quitas una clase reutilizable en lugar de gestionar una por cada bloque [05:00].

¿Cómo se ve BEM combinado con Sass?

Aquí viene lo interesante. Cuando juntas BEM con un preprocesador como Sass, el CSS se vuelve mucho más legible gracias al anidamiento.

Sin Sass, escribes cada clase de forma independiente:

css .card { } .card__image { } .card__button { } .card__button--active { }

Con Sass, anidas todo dentro del bloque padre usando el selector &:

scss .card { &__image { } &__button { &--active { } } }

Esta sintaxis mantiene la convención BEM intacta pero agrupa visualmente todo lo relacionado con el bloque. El resultado: menos repetición y una estructura que refleja la jerarquía del componente sin sacrificar especificidad [06:30].

Recomendaciones finales para trabajar con BEM

Los proyectos que aplican BEM correctamente son fáciles de leer, intuitivos y evitan los selectores anidados problemáticos que generan conflictos de especificidad.

• Mantén bloques independientes aunque vivan dentro de otros bloques.
• No uses BEM para reflejar la profundidad del HTML.
• Crea clases utilitarias separadas para estados generales como ocultar o mostrar.
• Combina BEM con Sass para escribir CSS más organizado.

La metodología es flexible: puedes personalizarla a tu gusto siempre que respetes la lógica de bloque, elemento y modificador. Cuéntame en los comentarios qué soluciones le darías tú a estos problemas y si ya te has enfrentado a ellos en proyectos reales.