Refactorización de CSS en Vue usando la metodología BEM

Clase 7 de 19 • Curso de Arquitecturas CSS

Clase anteriorSiguiente clase

Resumen

¿Cómo aplicar la metodología BEM en un proyecto de Vue?

La metodología BEM (Bloque, Elemento, Modificador) es fundamental en el desarrollo de aplicaciones frontend para garantizar un código CSS semántico y bien estructurado. Aquí exploraremos cómo puedes aplicar BEM en un proyecto de Vue, basado en un caso práctico de un estudiante. El proyecto se llama "Curso Arquitectura CSS Proyecto TOOLS" y puedes acceder al repositorio disponible para obtener más detalles.

¿Cuál es la estructura inicial del proyecto?

El proyecto comienza con una organización de carpetas típica de Vue:

  • fuente: Contiene los archivos fuente del proyecto.
  • assets: Incluye recursos como imágenes y estilos.
  • componentes: Alberga los componentes Vue que forman la interfaz.

En el código del estudiante, el componente footer es un punto focal para la refactorización. Inicialmente, el footer utiliza la clase grapper, mientras que sus elementos incluyen varias clases, como footer-container y social-container. Este es un ejemplo de cómo pueden surgir inconsistencias cuando no se sigue la metodología BEM de manera estricta.

¿Qué cambios se realizaron en el refactor?

Se llevaron a cabo varias mejoras para alinearse mejor con BEM:

  • Estructura clara: Cambiamos el HTML al considerar el footer como un bloque, y los elementos internos como social media se trataron como bloques independientes.

  • Cambio semántico: Se introdujo una estructura de lista (ul, li) en lugar de div para mejorar la semántica HTML, asignando la clase social-media__list-item.

  • Separación de bloques: Se introdujeron nuevas clases como social media, diferenciando los elementos que representan distintas secciones funcionales de la interfaz.

<div class="grapper">
  <footer class="footer">
    <ul class="social media">
      <li class="social media__list-item">
        <a class="social media__link" href="#">Link</a>
      </li>
    </ul>
    <div class="footer__copyright">
      <span class="footer__location">Location</span>
      <span class="footer__signature">Signature</span>
    </div>
  </footer>
</div>

Estos cambios no solo mejoran la claridad y escalabilidad del proyecto, sino que también alinean el código con las buenas prácticas de BEM.

¿Qué recomendaciones puedes seguir al implementar BEM?

  • Consistencia en la nomenclatura: Al definir nombres de clases, sigue siempre la misma estructura BEM: bloque__elemento--modificador.

  • Bloques dentro de bloques: Es completamente válido tener un bloque dentro de otro bloque siempre que mantenga su funcionalidad y propósito.

  • Documentación y comentarios: Añade comentarios claros a tu código donde sea necesario, especialmente en proyectos colaborativos.

¿Cómo puedes contribuir al proyecto?

Te invitamos a que explores más componentes de este proyecto de Vue, plantees mejoras o refactorizaciones y explores la metodología BEM con tu propio enfoque. Contribuir al proyecto a través de pull requests en el repositorio es una excelente manera de practicar tus habilidades y recibir retroalimentación. También, podrías sugerir cambios o compartir tu propio enfoque sobre cómo aplicar BEM en otras partes del proyecto.

Recuerda que la práctica hace al maestro, así que no dudes en seguir explorando y aprendiendo. ¡Nos encantará ver tus contribuciones y enfoques innovadores!