Destino Dev

Cursos

CSS Avançado: Variáveis, Performance e Arquitetura

Código do curso: github.com/johnpires/css-avancado-variaveis-performance-arquitetura

Domine os conceitos mais avançados do CSS moderno e eleve a qualidade dos seus projetos web a outro patamar. Neste curso, você aprenderá a utilizar Custom Properties (variáveis CSS) para criar sistemas de design escaláveis, implementar temas dinâmicos e manter bases de código CSS organizadas e reutilizáveis.

Explore técnicas avançadas de performance no CSS, incluindo análise de repaint e reflow, uso eficiente de propriedades que disparam a aceleração por GPU, otimização de seletores e estratégias para reduzir o tempo de carregamento. Você também aprenderá metodologias de arquitetura CSS como BEM, ITCSS e CSS-in-JS, além de técnicas modernas com Houdini e Container Queries.

Ao final do curso, você será capaz de estruturar projetos CSS de grande escala com manutenibilidade e performance excepcionais, além de criar sistemas de design tokens robustos e aplicar as mais recentes APIs do CSS para construir interfaces sofisticadas.

Conteúdo do curso

Módulo 1: CSS Custom Properties e Design Tokens

Aprenda a usar variáveis CSS nativas para criar sistemas de design escaláveis e temas dinâmicos.

  1. Introdução às CSS Custom Properties (8 min)
  2. Design Tokens com CSS Variables (8 min)
  3. Implementando Temas com Custom Properties (8 min)
  4. Animações Dinâmicas com CSS Variables (8 min)
  5. CSS Variables em Componentes: Padrões Avançados (8 min)
  6. Tokens de Espaçamento e Sistema de Grid (8 min)
  7. Debugging e Manutenção de CSS Variables (2 min)

Módulo 2: Performance e Otimização CSS

Técnicas avançadas para otimizar a performance de CSS, incluindo análise de repaint, reflow e aceleração por GPU.

  1. Como o Browser Renderiza CSS: Repaint e Reflow (2 min)
  2. Aceleração por GPU e will-change (2 min)
  3. Otimização de Seletores CSS (2 min)
  4. Critical CSS e Estratégias de Carregamento (8 min)
  5. Contain e Content-Visibility para Performance (2 min)
  6. Fonts, Images e Recursos Externos (8 min)
  7. Auditoria de Performance CSS com Ferramentas (8 min)

Módulo 3: Arquitetura CSS: BEM, ITCSS e Metodologias

Aprenda a estruturar projetos CSS de grande escala usando metodologias consagradas como BEM, ITCSS, SMACSS e Atomic CSS.

  1. BEM: Block Element Modifier (8 min)
  2. ITCSS: Inverted Triangle CSS (2 min)
  3. Atomic CSS e Utility-First (Tailwind) (8 min)
  4. CSS Modules e Scoped Styles (2 min)
  5. Object-Oriented CSS (OOCSS) e SMACSS (3 min)
  6. Construindo um Design System em CSS Puro (8 min)

Módulo 4: CSS Moderno: Houdini, Container Queries e Cascade Layers

Explore as APIs mais recentes do CSS incluindo Houdini para extensão do mecanismo de estilo, Container Queries e Cascade Layers.

  1. Container Queries: Responsividade por Componente (2 min)
  2. CSS Cascade Layers (@layer) (3 min)
  3. CSS Houdini: Estendendo o Motor de Renderização (8 min)
  4. CSS Scroll-Driven Animations (3 min)
  5. Novas Funções CSS: color-mix, oklch e clamp (3 min)
  6. CSS Subgrid e Layout Avançado (2 min)
  7. CSS Nesting Nativo (2 min)

Módulo 5: CSS-in-JS, Preprocessadores e Ferramentas

Domine preprocessadores avançados como Sass/SCSS, PostCSS, e soluções CSS-in-JS para projetos modernos.

  1. Sass/SCSS Avançado: Além do Básico (8 min)
  2. Sass/SCSS Avançado: Além do Básico (8 min)
  3. Sass/SCSS Avançado: Além do Básico (8 min)
  4. PostCSS: Transformando CSS com JavaScript (8 min)
  5. PostCSS: Transformando CSS com JavaScript (8 min)
  6. CSS-in-JS: Styled Components e Emotion (8 min)
  7. CSS-in-JS: Styled Components e Emotion (8 min)
  8. Lightning CSS e Build Pipelines Modernos (8 min)
  9. Lightning CSS e Build Pipelines Modernos (8 min)
  10. Testes de CSS e Visual Regression (8 min)
  11. Testes de CSS e Visual Regression (8 min)
  12. Storybook para Documentação de Design System (8 min)
  13. Storybook para Documentação de Design System (8 min)

Módulo 6: Projeto Final: Sistema de Design Escalável

Aplique todos os conceitos aprendidos criando um sistema de design completo com tokens, temas, componentes e documentação.

  1. Planejamento do Design System: Tokens e Estrutura (20 min)
  2. Implementando o Sistema de Grid e Layout (18 min)
  3. Construindo Componentes Base: Button, Input e Badge (22 min)
  4. Tema Escuro e Sistema de Temas Dinâmicos (18 min)
  5. Animações e Micro-interações no Design System (16 min)
  6. Documentação e Publicação do Design System (20 min)