Curso de Arquitectura CSS

Por Núria Soriano y Rafa Gómez – Diseño y Arquitectura de Software y Frontend

Aprende los fundamentos de una buena arquitectura CSS para que tus estilos sean fáciles de mantener y escalar.

💸 Primera lección disponible sin registro 💸

🤓 ¿Qué aprenderás en este curso?

En arquitectura CSS nos enfrentamos a los mismos retos de escalabilidad, cambiabilidad y mantenibilidad de código que con cualquier otro lenguaje. Conceptos como Single Responsibility Principle, herencia vs composición o DRY también aplican a CSS, y si los tenemos en cuenta a la hora de escribir nuestro código conseguiremos tener unos estilos bien organizados con los que será más fácil de trabajar (¡no más !important para arreglarlo todo!).

En este curso veremos como aplicar un buen naming a nuestras clases para comunicar su uso, cómo modularizar los estilos para que estos sean fáciles de localizar y mantener, sacar provecho de preprocesadores como SASS, herramientas para analizar la calidad de código y detectar dead code, ¡y mucho más!

También hablaremos de cómo aplicar una buena arquitectura CSS en aplicaciones JavaScript. Incluso aunque usemos soluciones como CSS-in-JS o Tailwind, aún hay cosas a tener en cuenta a la hora de trabajar con los estilos de nuestros componentes.

🎥 Contenido

[GRATIS] 🏗️ ¿Que queremos solucionar con una arquitectura CSS?
- 💣 CSS es un lenguaje de programación
- 👷 ¿Qué queremos solucionar con arquitectura CSS?
🌸 Buenas prácticas al escribir clases en CSS
- 🎯 Visualiza la calidad de tu CSS: Especificidad de los selectores
- 🍅 Single Responsibility Principle en CSS
- 👨‍👧‍👦 Inheritance vs composition en CSS
📝 Nomenclatura de tus clases: BEM
- 🧩 Mejora tu CSS con BEM: ventajas y inconventes
- ⚡ Mejorar lo que no nos gusta de BEM con utility classes
👐 Estructura los estilos de tu aplicación: comparando sistemas de arquitectura
- ⚛️ Atomic Design: compartir lenguaje entre diseño y desarrollo
- 🔻ITCSS
- 🙌 Lo mejor de los dos mundos
🎈 Aplica arquitectura CSS: trabajando con estilos globales
- 🛠️ Cómo utilizar variables, mixins y funciones
- ⛱️ La base del CSS: estilos globales
🍱 Modulariza los estilos de tu aplicación
- 🦠 Crea nuestros primeros objetos y Átomos
- 🧬 Crea clases con significado: Moléculas
- 🦑 Crea componentes independientes: Organismos
🚀 Arquitectura CSS en apps JS
- YouTube 🤯 Problemas de arquitectura CSS en aplicaciones JS
- 🎁 Cómo aplicar BEM en componentes JS
- 🎨 Separa la lógica del estilo: componentes de UI
👭 La relación entre componentes
- 💔 El problema de la modularización
- 💅 Componentes de layout
🔜 Conclusiones y siguientes pasos
- ❓Preguntas frecuentes
- 🤟 Siguientes pasos