Refactorización de Código con Metodología BEM en Proyectos Reales

¿Cómo aplicar la metodología BEMI en un proyecto real?

La metodología BEMI (Bloque, Elemento, Modificador y Identificador) es fundamental para mantener un código limpio y fácil de mantener. Al implementar esta metodología en un proyecto real de un estudiante, se busca mejorar la estructura y claridad del código. Este proyecto, que involucra HTML, CSS y JavaScript, servirá como base para realizar un refactor utilizando BEMI. El objetivo no es criticar, sino mostrar cómo se puede llevar a cabo una mejor organización y estructura de código.

¿Cuál es la estructura original del proyecto?

El proyecto que se analizará contiene las siguientes características:

• Carpetas:

  • HTML principal.
  • Carpeta de JavaScript con un archivo.
  • Carpeta de estilos dividida en pequeños módulos para facilitar el mantenimiento.

• Código HTML:

  • Un header sin clases inicialmente, que incluye un div con clase logo-name.
  • Contiene una imagen con clase relerf-logo y un texto alternativo.
  • Utilización inconsistente de guiones bajos y medios en las clases.
  • El orden de los atributos no es constante.

¿Cómo implementamos el refactor con BEM?

Para mejorar el proyecto utilizando la metodología BEM, se realizaron varias modificaciones:

1. Cambio de etiquetado:

   • Se sustituyó la etiqueta <header> por <nav> como contenedor principal.
   • Se añadió una clase de bloque denominada navbar.

2. Nomenclatura de clases:

   • Se ajustaron los nombres de clases para seguir el patrón de BEM.
   • Ejemplos de clases incluyen navbar__logo, navbar__name, y navbar__icon.

3. Consistencia y orden de atributos:

   • Se estableció un orden constante: primero los IDs y luego las clases.

4. Optimización del HTML:

   • Simplificación y reducción de líneas de código manteniendo el mismo CSS final.

¿Cuáles son los beneficios de este refactor?

Al aplicar la metodología BEM, no solo se mejoró la organización y legibilidad del código, sino que también se logró una reducción significativa en el número de líneas, pasando de 82 a 46 líneas. Esto resulta en un código más limpio y manejable, donde es más fácil identificar las estructuras simplemente leyendo el HTML.

¿Cuál es el reto para los estudiantes?

Se invita a los estudiantes a practicar este refactor siguiendo la metodología BEM con otras secciones del proyecto, como el footer o la parte de proyectos. Animamos a realizar pull requests y compartir resultados, además de la posibilidad de aportar ideas o sugerencias en los comentarios. Tal actividad fomenta el aprendizaje activo y la aplicación práctica de conceptos teóricos.

Este enfoque práctico en la enseñanza del refactor con BEM no solo mejora las habilidades técnicas, sino que también fomenta la creatividad y el pensamiento crítico. Continuemos avanzando en la comprensión y aplicación de metodologías efectivas de desarrollo.