No entendí una verg@, pero sé que mas adelante cuendo aprenda react voy a tener que volve a esta clasem de todas formas gracias jajaj
Fundamentos de Arquitectura en CSS
Arquitecturas de CSS: Limpieza, Escalabilidad y Mantenibilidad
Principios SOLID aplicados a CSS: Guía práctica
BEM
Metodología VEM: Uso en HTML y CSS con Ejemplos Prácticos
Metodología BEM: Bloques, Elementos y Modificadores en HTML/CSS
Solución de Problemas Comunes en BEM y Mejores Prácticas
Refactorización de Código con Metodología BEM en Proyectos Reales
Refactorización de CSS en Vue usando la metodología BEM
Refactorización de Componentes en React con BEM y Styled Components
Atomic Design
Metodología Atomic Design para estructurar proyectos de software
Refactorización de Proyectos React con Atomic Design
Atomic Design en Vue: Organización de Componentes y Carpetas
OOCSS
Principios de OOCSS: Separación de Estructura y Estilo en CSS
Refactorización de CSS en Angular con OOCSS y SASS
SMACSS
Metodología SMACS para Organizar Proyectos CSS
Refactorización de CSS en Angular con SMACS y SASS
ITCSS
Arquitectura ITCSS: Principios y Capas para Proyectos CSS Grandes
Limitaciones de ITSSS en Proyectos Pequeños
TailwindCSS
Frameworks de CSS: Uso y Aplicación en Proyectos Reales
Evaluación de Arquitecturas CSS para Proyectos Front-end
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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:
Para entender mejor la interacción entre Venn y Styled Components, observemos la nueva estructura del proyecto:
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.
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.
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.
Aportes 10
Preguntas 2
No entendí una verg@, pero sé que mas adelante cuendo aprenda react voy a tener que volve a esta clasem de todas formas gracias jajaj
Wow!!!, ahora entiendo por qué se usa esta configuración,
React + CSS in JS + SASS, al menos a en un contexto funcional, aunque aún me pregunto el porqué se usa Sass específicamente, en la ruta de react no recuerdo a ver visto el uso de style-components, solo me quedan dos cursos por terminar en la ruta, y empieza next.js.
Pero con los cursos ya hechos puedo entender como funcionan estos componentes.
Definitivamente lo voy a aplicar en mis proyectos que realizó con React, me encantó!
Muy interesante conocer como aplicar BEM a nivel de componentes en React y como cambia al CSS tradicional
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?