Refactorización de Componentes en React con BEM y Styled Components

¿Cómo se aplica la metodología Venn en un proyecto de React?

La Metodología Venn se ha convertido en una herramienta esencial para ordenar y organizar proyectos de desarrollo web, contribuyendo a una mejor estructuración del código. En esta lección, se lleva esta metodología a un proyecto de React, incorporando también CSS en JS a través de Styled Components. Este enfoque no solo facilita el mantenimiento del código, sino que también mejora su legibilidad a largo plazo. El proyecto que se analiza es de un estudiante y se trabajó en mejorar su arquitectura utilizando este enfoque moderno.

¿Qué cambios se realizaron en el proyecto del estudiante?

Al aplicar la metodología Venn, se llevó a cabo una reestructuración significativa del código. Entre los cambios más destacados se encuentran los siguientes:

• Creación de una carpeta específica para Components, que aloja los distintos componentes como Card, Header, Loading, y MyApp.
• Implementación de Styled Components para manejar el CSS directamente dentro de los componentes de React.
• Refactorización de los componentes, adoptando un enfoque sistemático para cambiar las clases y aplicar la arquitectura del estilo BEM combinado con Styled Components.

¿Cómo se estructuran los componentes utilizando Venn y Styled Components?

Para entender mejor la interacción entre Venn y Styled Components, observemos la nueva estructura del proyecto:

• Bloques: Se identifican los componentes principales que se denominaron como bloques. Por ejemplo, Cart, Header y Pills.
• Contenedor: Un contenedor que centraliza la vista de los bloques y elementos, facilitando así la importación y gestión de estos componentes.
• Elementos: En esta sección se destacó un único elemento llamado Loader.

Dentro de cada bloque, la estructura interna se desarrolla de manera detallada para maximizar la organización y claridad. Cada componente tiene un índice principal y un archivo de estilo basado en Styled Components.

¿Cómo funcionan Styled Components junto con BEM en React?

Styled Components es una librería en React que permite escribir CSS desde JavaScript. Cuando se utiliza en conjunto con BEM (Block, Element, Modifier), la estructura del HTML se organiza de la siguiente manera:

.cart {
  &__header {
    // estilos para el header
  }
  &__figure {
    // estilos para la figura
  }
  &__title {
    // estilos para el título
  }
}

En esta estructura:

• .cart se considera el bloque central.
• &__header es un elemento hijo del bloque, al igual que &__figure y &__title.

Este sistema ayuda a evitar la confusión de nombres de clases y hace que el CSS sea más fácil de mantener.

¿Qué experiencia proporciona la combinación de BEM y Styled Components?

Usar BEM junto con Styled Components no solo optimiza visualmente el código, sino que también ofrece una experiencia de desarrollo mucho más clara y ordenada. El código resultante es limpio y muy comprensible, facilitando la lectura y la colaboración en equipo. Además, la combinación de estas herramientas fomenta una estructura consistente, un aspecto crucial a medida que los proyectos de React escalan en complejidad.

Si te entusiasma esta combinación y deseas adoptarla en tus proyectos, recuerda que la clave está en estructurar el código desde un inicio de manera modular y utilizando estas herramientas de manera eficiente. Si ya empleas alguna estrategia similar o tienes ideas nuevas para combinar BEM y Styled Components, ¡comparte tu experiencia y enriquece la comunidad con tus comentarios! Esto no solo mejora tus competencias, sino que también inspira a otros a seguir avanzando en el desarrollo web.