¿Qué son las arquitecturas CSS?

1/19
Recursos
Transcripción

¿Qué es la arquitectura en CSS y por qué es importante?

CSS suele ser un lenguaje sencillo pero puede volverse complejo al trabajar con proyectos grandes. Ese incremento en la dificultad nos obliga a buscar que nuestro código sea limpio, escalable y mantenible. La arquitectura en CSS se refiere a cómo organizamos nuestras carpetas y archivos para cumplir con estas características.

Principios fundamentales para una buena arquitectura en CSS

Para lograr efectivamente una arquitectura CSS estable, implementamos varios principios de la programación orientada a objetos:

  • Principio SOLID: Nos ayuda a estructurar nuestro código CSS con una serie de pautas que mejoran la continuidad del proyecto.
  • Principio DRY (Don't Repeat Yourself): Evita la duplicación de código, permitiendo un CSS más limpio y eficiente.
  • Inmutabilidad: Promueve trabajar con estilos inmodificables, facilitando la predicción y mantenimiento del código.

¿Cómo aplicamos estos principios al CSS?

Implementamos estos principios revisando y ajustando proyectos reales. Al aplicar metodologías y arquitecturas específicas, transformamos el código existente en algo más limpio y eficiente.

Organización de archivos y carpetas

Otra clave es cómo organizamos nuestros archivos y carpetas:

  • Estructuración efectiva: Un sistema de carpetas bien estructurado facilita la accesibilidad y entendimiento.
  • Nombramiento claro de clases: Las convenciones como BEM (Block, Element, Modifier) estructuran el nombre de clases para un CSS más comprensible.

¿Qué metodologías utilizamos para refactorizar proyectos CSS?

En este curso, trabajaremos con proyectos reales de estudiantes usando tecnologías como HTML, CSS, JavaScript, React, Vue y Angular. Analizamos estos proyectos, los reestructuramos y aplicamos metodologías y patrones para mejorar:

  • Metodologías avanzadas: Implementamos técnicas como Atomic Design o ITCSS para una disposición coherente.
  • Patrones de arquitectura: El uso de patrones específicos clarifica el proceso de escalabilidad y mantenimiento del CSS.

Evaluación del antes y después

Este proceso incluye la evaluación de proyectos antes y después de aplicar las metodologías. Esto nos permite que nuestros alumnos vean el impacto directo de una arquitectura bien implementada en términos de claridad y manutención del código:

  • Revisión de proyectos: Analizamos detalladamente cómo el nuevo enfoque mejoró el proyecto.
  • Feedback y aprendizaje continuo: Se fomenta un entorno de mejora constante con el feedback de cada implementación.

En conclusión, dominar la arquitectura en CSS es esencial para que nuestros proyectos sean escalables y mantenibles. Este curso nos ofrece la oportunidad de refinar nuestras habilidades al aplicar principios y metodologías comprobadas en proyectos reales, fomentando así un aprendizaje más profundo y práctico. ¡Sigue aprendiendo, el mundo del desarrollo front-end está lleno de oportunidades para crecer y brillar!

Aportes 16

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Necesitamos hacer que el CSS sea:

  1. Limpio 🧹: Sin código innecesario y bien organizado.
  2. Escalable 📈: Listo para crecer y adaptarse a proyectos más grandes.
  3. Mantenible 🔧: Fácil de mantener y modificar sin problemas.
    .

Para lograrlo, podemos aplicar principios de programación orientada a objetos, como:

.

  • SOLID 🤝: Un conjunto de cinco principios para un código de calidad y fácil de mantener.
  • DRY 🌵: No repitas código, ¡mejor eficiencia y menos errores!
  • IMMUTABILITY ⛔️: Promueve la inmutabilidad para datos más seguros.
    .

ARQUITECTURA

Cómo se divide el código en archivos y carpetas.

Y cómo trabajamos con nuestros selectores (Nombramientos de clases)

Porfin nuevo curso de css con Estefany!

Nooooooo puede ser. ¿Platzi no tiene más profesores aparte de Estefani?

Perfecto, este curso se ve realmente bien, justo quería repasar solid. Por cierto, el curso es accesible desde el navegador, pero un no está agregado a una ruta.

Haber yo creo que se BEM, veremos si es cierto o no al finalizar este curso. que deseo hacer un refactor a un proyecto que he aplicado BEM, pero no de la mejor manera jejeje

Esforzandome de enamorarme de CSS

Este video como va terminar de esa manera, se que estuvo bien explicado lo que se va estudiar pero como termina este video es como diferente...
# ¿Qué es una arquitectura CSS? Las arquitecturas CSS aportan razonamiento a la creación de CSS, es una colección de directrices y mejores prácticas para ayudar a los desarrolladores a escribir código predecible, mantenible, escalable y más reutilizable. ## Objetivos de una arquitectura CSS * **Predecibles:** Las reglas actuarán como usted espera que lo hagan. Cuando añades o cambias una regla, no debería tener un efecto no deseado en otras secciones de tu sitio. Esto no es tan importante en sitios pequeños que no cambian mucho, pero sí en sitios grandes. * **Reutilizable:** Reglas abstractas y lo suficientemente desacopladas como para que puedas crear fácilmente nuevos componentes a partir de partes existentes sin recodificar patrones y problemas que ya has resuelto. * **Escalable:** Puede ser manejado por un solo individuo o un gran equipo de ingeniería con facilidad. * **Mantenible:** Cuando se implementan, modifican o reorganizan nuevos componentes y características en su página, no debería ser necesario refactorizar el CSS existente. * **Limpio:** Sin código innecesario y bien organizado. ## Podemos tomar los principios de POO para lograr los puntos anteriores: * **SOLID:** Es un acrónimo que agrupa 5 principios clave para el desarrollo eficiente, replicable, mantenible y escalable de software. * **DRY (Don't repeat yourself):** No repitas código. * **Inmutabilidad:** El estado no puede ser modificado una vez creado.

Las arquitecturas CSS

  • son enfoques y metodologías
  • para organizar y estructurar el código CSS en proyectos web
  • de manera más escalable, mantenible y fácil de entender.
     
    Estas arquitecturas proporcionan pautas y reglas para la organización de estilos CSS, lo que ayuda a mejorar la eficiencia del desarrollo y la colaboración en equipos.
     
    Algunas son:
  • BEM: Block Element Modifier /blɒk ˈɛlɪmənt ˈmɒdɪfaɪə/
  • SMACSS: Scalable and Modular Architecture for CSS /ˈskeɪləbᵊl ən ˈmɒʤələr ˈɑːkɪtɛkʧə fə siː-ɛs-ɛs/
  • OOCSS: Object-Oriented CSS /ˈɒbʤɪkt ˈɔːriɛntɪd siː-ɛs-ɛs/
  • ITCSS: Inverted Triangle CSS /ɪnˈvɜːtɪd ˈtraɪæŋɡᵊl siː-ɛs-ɛs/
Les comparto un tutorial que fue el proyecto final del curso anterior de Estefany (teffcode): ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcnBrb3JiNmcxMGh1a3Yyb2Iyb3RwNzFtZHdreWZuNGVjbmd0cjFmcCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/acZZL8l3DzrWjMfHp3/giphy.gif) ⭐Tutorial: <https://www.youtube.com/watch?v=QAoaVlBgBUo&t=336s> ⭐Demo: <https://raulsr92.github.io/reproductor-musica-proyecto/> ⭐Repo: <https://github.com/raulsr92/reproductor-musica-proyecto>

Los cursos de Estefany son fantásticos !

Entiendo el tema de hacer refactor, pero ¿por qué no retomarlo cómo el curso de hace como 4 años que tu hiciste el diseño y Oscar Barajas lo pasaba a react?, en la industria se tienen que evitar estos vicios

el problema de CSS es que parece tan facil, y esto es una arma de doble filo… me senti tan identificado con esta frase…

Arquitectura

Se refiere a la manera en que organizamos las carpetas y estructuramos el código para lograr que sea limpio, mantenible y escalable. Esto mejora la colaboración y la gestión del código en proyectos de mayor envergadura.

Uy así que para este curso era 🤯

Excelente, siempre tener complementos para fortalecer conocimiento de los lenguajes par fron-end, y mas con la excelenticima profe stefany