Aplicar la metodología BEM en un proyecto Vue te ayuda a mantener un CSS escalable, legible y libre de conflictos entre componentes. Aquí revisamos un caso real: el refactor del footer de un portafolio compartido por un estudiante, donde detectamos errores comunes y aplicamos correcciones que cualquier desarrollador frontend puede replicar.

¿Qué problemas presenta el código original del footer?

El proyecto del estudiante usa la estructura típica de Vue: una carpeta source con assets y components. Al revisar el componente del footer, encontramos varios puntos donde la convención de nombres se rompe.

El HTML inicial tenía un tag footer con clase wrapper, y dentro un div con clase footer-container. Hasta ahí, todo seguía la lógica de bloque y elemento. El problema apareció en los niveles más profundos.

• La clase footer-container__social-container intentaba seguir BEM, pero dentro tenía una clase suelta llamada social-network, sin relación con el bloque padre.
• El elemento a dentro del contenedor no tenía clase asignada.
• El segundo div usaba footer-container__copyright-container, pero los hijos volvían a tener clases independientes, rompiendo la jerarquía.

¿Qué error común se comete al aplicar BEM? Pensar que los niveles del HTML deben reflejarse en el nombre de las clases. BEM no depende de la profundidad del DOM, sino de la relación lógica entre bloque y elemento.

¿Cómo refactorizar el footer aplicando BEM correctamente?

En el pull request del refactor cambiamos la estructura para respetar la lógica de bloque, elemento y modificador. Lo primero fue simplificar nombres redundantes y reorganizar la semántica del HTML.

En lugar de mantener footer-container, usamos solo la clase footer para el bloque principal. Es válido conservar el sufijo container, pero al tratarse ya de un bloque, resulta redundante. La regla aquí es priorizar claridad sobre repetición.

Dentro del footer convertimos la sección de redes sociales en un bloque independiente llamado social-media, con su elemento social-media__list-item. Este es uno de los puntos clave de BEM: un bloque puede contener otro bloque sin necesidad de heredar su nombre.

• El bloque footer agrupa toda la sección inferior del portafolio.
• El bloque social-media agrupa los íconos y enlaces de redes sociales.
• El bloque de copyright contiene elementos como location y signature, también con su propia identidad.

¿Se puede tener un bloque dentro de otro bloque en BEM? Sí, es 100% válido. Cada bloque puede funcionar de forma autónoma y reutilizarse en otras partes del proyecto sin depender del padre.

¿Por qué cambiar la semántica del HTML también importa?

El footer original usaba div para listar las redes sociales. En el refactor lo convertimos en una lista (ul y li), porque semánticamente representa un conjunto de elementos del mismo tipo. BEM funciona mejor cuando el HTML ya está bien estructurado.

Esta decisión mejora la accesibilidad y permite que la clase social-media__list-item describa con precisión qué representa cada elemento dentro del bloque.

¿Qué aprendiste sobre BEM aplicado a Vue?

La metodología BEM (Block, Element, Modifier) en Vue funciona igual que en cualquier otro framework: lo importante es identificar qué partes de la interfaz son bloques autónomos y cuáles son elementos dependientes de ese bloque.

En el ejemplo del footer, separar social-media como bloque propio en lugar de anidarlo dentro de footer-container hace el código más mantenible. Si mañana decides reutilizar las redes sociales en el header, no tendrás que renombrar nada.

• Bloque: entidad independiente con significado propio (footer, social-media).
• Elemento: parte de un bloque que no tiene sentido fuera de él (social-media__list-item).
• Modificador: variante de un bloque o elemento (no aplicado en este refactor, pero parte de la metodología).

Evita forzar nombres largos solo porque el HTML está anidado. Si una sección tiene identidad propia, conviértela en bloque. Si depende del bloque padre, úsala como elemento con la convención bloque__elemento.

Ahora te toca a ti: revisa otro componente de este proyecto, aplica BEM y comparte tu pull request en los comentarios. Si tienes una forma distinta de refactorizar este footer, cuéntame cómo lo harías.