CSS — Avanzado

Este curso está dirigido a desarrolladores y desarrolladoras front-end con dominio sólido de CSS que necesitan dar el salto hacia la ingeniería de estilos a escala de producto. A lo largo de ocho horas de trabajo práctico, los participantes aprenderán a diseñar arquitecturas de estilos sostenibles apoyadas en metodologías contrastadas —ITCSS, CSS Modules, @layer y otras—, a construir sistemas de theming dinámico con Custom Properties que soporten múltiples temas sin duplicar lógica de layout, y a optimizar el rendimiento de carga extrayendo Critical CSS y midiendo el impacto real en métricas como FCP. Además, el curso cubre la integración de calidad continua en el flujo de trabajo del equipo: configuración de Stylelint en CI, visual regression testing con herramientas modernas y análisis de recálculo de estilos con DevTools. Al finalizar, cada participante habrá elaborado una arquitectura CSS documentada para un proyecto de múltiples vistas, con pipelines de validación automática y métricas de rendimiento medibles que respaldan las decisiones técnicas adoptadas.

1. Describir los principios que diferencian metodologías CSS orientadas a la arquitectura —cascada, especificidad, naming y organización en capas— y justificar su elección en función del contexto del proyecto.
2. Comparar BEM, utility-first y CSS-in-JS mediante métricas concretas de mantenibilidad, especificidad y bundle size obtenidas sobre un componente de referencia común.
3. Diseñar un sistema de theming dinámico basado en Custom Properties que soporte modo oscuro y múltiples temas, usando la cascada como único mecanismo de resolución sin duplicar reglas de layout.
4. Arquitecturar un sistema de estilos escalable para una aplicación de múltiples vistas, aplicando y documentando las decisiones de capas, especificidad y naming con una metodología justificada.
5. Optimizar el rendimiento de carga de estilos extrayendo el Critical CSS, difiriendo el CSS no crítico y verificando la mejora en FCP con Lighthouse o herramienta equivalente.
6. Reemplazar Media Queries de viewport por Container Queries en un sistema de componentes existente, justificando cada decisión con criterios de cohesión del componente.
7. Automatizar la validación de convenciones CSS mediante Stylelint integrado en CI y configurar una herramienta de visual regression testing que bloquee merges ante cambios visuales no aprobados.
8. Evaluar el impacto de selectores de alta especificidad y reglas redundantes en el rendimiento de recálculo de estilos usando el panel Performance de DevTools, y aplicar refactorizaciones con mejoras medibles.

Bloque 1 — Arquitectura de estilos y metodologías

El curso arranca con una revisión crítica del paisaje metodológico actual. Se estudian los fundamentos que subyacen a cualquier sistema de estilos —cascada, especificidad, organización en capas y convenciones de nomenclatura— para pasar después a comparar tres enfoques representativos: BEM, utility-first y CSS-in-JS. La comparación no es teórica: los participantes aplican cada metodología sobre un mismo componente de referencia y extraen métricas reales de mantenibilidad, especificidad y bundle size. A partir de ese análisis, se introduce ITCSS y la directiva @layer como mecanismos de control explícito de la cascada, y se diseña desde cero la arquitectura de estilos de una aplicación de múltiples vistas, incluyendo la documentación de todas las decisiones de capas y naming.

Bloque 2 — Theming dinámico y adaptabilidad de componentes

Con la arquitectura establecida, el foco se desplaza hacia la extensibilidad del sistema. Se construye un sistema de theming dinámico completo usando Custom Properties CSS: definición de tokens semánticos, implementación de modo oscuro y soporte de múltiples temas sin duplicar reglas de layout, aprovechando la cascada como mecanismo de resolución nativo. A continuación, se aborda la adaptabilidad a nivel de componente: se analiza cuándo las Media Queries de viewport resultan insuficientes o contraproducentes y se reemplaza ese patrón por Container Queries en los casos en que el comportamiento depende del contenedor, documentando los criterios de cohesión que guían cada decisión.

Bloque 3 — Rendimiento: carga y recálculo

Este bloque trabaja el rendimiento desde dos ángulos complementarios. El primero se centra en la carga: se identifica el Critical CSS de una página real, se extrae y se configura la carga diferida del CSS no crítico, midiendo antes y después con Lighthouse el impacto en FCP. El segundo ángulo atiende al rendimiento en tiempo de ejecución: mediante el panel Performance de Chrome DevTools se localizan selectores de alta especificidad y reglas redundantes que disparan recálculos de estilos costosos, se proponen refactorizaciones y se verifica la mejora con métricas comparables.

Bloque 4 — Calidad continua: linting y regresión visual

El bloque final integra todo lo anterior en el flujo de trabajo del equipo. Se configura Stylelint —o herramienta equivalente— alineando sus reglas con la arquitectura adoptada en el Bloque 1 y se incorpora al pipeline de CI para que las violaciones bloqueen la integración. Paralelamente, se configura una solución de visual regression testing (Percy, Chromatic, Playwright visual snapshots u equivalente) que captura el estado visual aprobado de los componentes y bloquea automáticamente los merges cuando se detectan diferencias no revisadas, cerrando así el ciclo de calidad end-to-end del sistema de estilos.

• Navegador basado en Chromium actualizado (Chrome o Edge), con acceso a DevTools y al panel Performance.
• Node.js 20 LTS o superior con npm o pnpm disponibles en el PATH.
• Editor de código con soporte para extensiones (se recomienda VS Code con las extensiones Stylelint y CSS Variable Autocomplete instaladas).
• Cuenta gratuita en una plataforma de CI/CD accesible (GitHub Actions, GitLab CI o equivalente) y repositorio Git propio donde el participante tenga permisos de configuración.
• Cuenta de prueba en al menos una herramienta de visual regression testing (Percy, Chromatic o acceso a Playwright en el entorno local).
• Lighthouse disponible como extensión de Chrome o mediante CLI (npm install -g lighthouse).
• Conexión a internet estable para acceder a documentación, herramientas en línea y repositorios de ejercicios del curso.

Para aprovechar este curso los participantes deben haber completado CSS02 o demostrar un nivel intermedio consolidado en CSS, que incluya: dominio de Flexbox y Grid Layout, uso de Custom Properties, manejo de la especificidad y la cascada, y experiencia previa estructurando estilos en proyectos reales de tamaño mediano. Se recomienda también familiaridad básica con entornos de línea de comandos y conceptos elementales de CI/CD (qué es un pipeline, qué significa que una comprobación bloquee un merge), ya que el curso integra herramientas de automatización desde el primer día.