CSS Avançado: Quando a Web Vira um Playground

Você já passou pelo básico e pelo intermediário. Sabe Flexbox, sabe position, sabe fazer uma página responsiva. Agora é hora de brincar de verdade - e de entender o que está na fronteira do CSS moderno.

Este nível cobre 12 nós que separam o CSS "que todo mundo usa" do CSS "que está redefinindo o que dá pra fazer na web":

• Grid: layout em duas dimensões
• Variáveis CSS (custom properties): theming dinâmico, design system
• Animações: @keyframes, animation, timing
• Transform: translate, rotate, scale, 2D e 3D
• Funções modernas: clamp(), min(), max(), calc()
• Container queries: @container que responde ao pai, não à tela
• :has(): o seletor "pai" que o CSS prometeu há anos
• Logical properties: CSS que respeita a direção de escrita
• Acessibilidade visual: prefers-reduced-motion, prefers-color-scheme
• Arquitetura: BEM, organização de arquivos, reset
• Performance: reflow, repaint, composite, will-change, critical CSS
• O mundo além do CSS puro: frameworks, pré-processadores, CSS-in-JS, bibliotecas de componentes (apresentados como mapa, não como tutorial)

Este é o nível onde as coisas ficam realmente divertidas. Container queries, :has(), Grid, clamp() - cada um desses, na época em que chegou, mudou como a gente pensa layout. Você vai sair entendendo não só como usar, mas quando faz sentido usar cada um.

Atenção: nem todo nó deste nível é "obrigatório" para o dia-a-dia. Variáveis CSS, Grid, clamp() e acessibilidade visual são essenciais. Logical properties, :has() e performance são fundamentais para projetos grandes. Transform 3D e o nó final sobre o ecossistema são mais "ampliar horizonte" - importantes para decidir com consciência, mas você não precisa decorar tudo.

Quando você terminar este nível, vai estar no nível em que a maioria dos engenheiros de frontend sêniores opera. A diferença entre você e um designer system specialist vai ser a profundidade em uma área específica - Grid, animação, performance, arquitetura. Mas a base é essa.