Desarrollo Frontend · FRO-103

CSS avanzado: animación y arquitectura

Transiciones, animaciones, container queries, capas en cascada y estrategias contra la hoja de estilos podrida.

Bajo demanda Avanzado 7 módulos · 35 clases

Formato asíncrono Desarrollo CSS

DESARROLLO

Lo que aprenderás

Diseñar transiciones y animaciones con keyframes cuidando las propiedades que no fuerzan reflujo.
Adaptar componentes a su contenedor con container queries en lugar de a la ventana del navegador.
Ordenar la especificidad con capas en cascada y evitar el uso de importante.
Encapsular estilos con anidamiento nativo y con las capas de un sistema de componentes.
Medir el rendimiento de una animación con el panel de rendimiento y sostener sesenta fotogramas.
Definir una arquitectura de hoja de estilos con convención de nombres, tokens y reglas de crecimiento.
Respetar prefers-reduced-motion y otras preferencias del sistema en toda la interfaz.

Contenido del curso

7 módulos · 35 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Repaso exigente de la cascada 5 clases

Especificidad revisada con casos reales
Capas en cascada y orden explícito
Anidamiento nativo y su efecto en la especificidad
El coste real de importante
Ámbito de estilos y contención

Módulo 2 · Transiciones 5 clases

Propiedades animables y las que no lo son
Curvas de temporización y percepción del movimiento
Transiciones sobre estados de interacción
Entrada y salida de elementos del árbol
Errores típicos que producen parpadeos

Módulo 3 · Animaciones 5 clases

keyframes: sintaxis y control de fases
Encadenar y retrasar animaciones
Animar transform y opacity sin repintar
Animaciones al desplazar la página
Respetar prefers-reduced-motion

Módulo 4 · Componentes que se adaptan solos 5 clases

Container queries frente a media queries
Unidades relativas al contenedor
Componentes reutilizables en anchos distintos
Consultas de estilo y estados del componente
Reservas para navegadores sin soporte

Módulo 5 · Rendimiento visual 5 clases

Reflujo, repintado y composición
Panel de rendimiento del navegador paso a paso
Capas de composición y su coste en memoria
will-change usado con criterio
Diagnóstico de una animación con caídas de fotogramas

Módulo 6 · Arquitectura de la hoja de estilos 5 clases

Tokens de diseño y nomenclatura
Convención de nombres de clases y sus alternativas
Organización de ficheros y orden de importación
Utilidades frente a componentes
Cómo eliminar CSS muerto sin miedo

Módulo 7 · Proyecto de cierre 5 clases

Punto de partida: hoja de estilos heredada y frágil
Diagnóstico de especificidad y duplicidades
Reorganizar en capas y tokens
Añadir movimiento con medición de rendimiento
Guía de estilo para el resto del equipo

Requisitos

Uso fluido de CSS: selectores, especificidad, Flexbox y Grid.
Experiencia manteniendo hojas de estilo de un proyecto real.
Manejo de las herramientas de desarrollo del navegador.

Descripción

En un proyecto que dura, la hoja de estilos se degrada de forma previsible: reglas que nadie se atreve a borrar, cadenas de selectores cada vez más largas y declaraciones marcadas como importantes para ganar batallas de especificidad. El coste no es estético, es de velocidad de cambio: cada ajuste pequeño obliga a comprobar media aplicación por miedo a romper algo.

Este curso trata las dos caras del CSS avanzado. Por un lado la expresividad: transiciones, animaciones con keyframes, container queries y consultas de preferencias del usuario, siempre con medición de rendimiento en el panel del navegador. Por otro la arquitectura: capas en cascada, anidamiento nativo, tokens de diseño y convenciones que hacen predecible dónde vive cada regla y qué gana ante un conflicto.

Lo que queda es una hoja de estilos que se puede modificar con confianza y una interfaz animada sin penalizaciones de rendimiento. Es la preparación directa para el curso de sistemas de diseño y componentes reutilizables, donde estas convenciones se formalizan en una biblioteca compartida entre varios proyectos y equipos.

¿Para quién es este curso?

Desarrolladores frontend que mantienen la hoja de estilos de un producto en evolución.
Perfiles que heredan un proyecto con CSS acumulado y necesitan reordenarlo sin rehacerlo.
Quienes construyen interfaces con movimiento y deben justificar su coste en rendimiento.