Layout, tokens, responsivo, acessibilidade visual e tooling (incluindo utility-first) sem depender só de framework.
Mapa mental do roadmap
Flexboxcomponentes
Flexbox e um topico essencial da fase "Layout" do Roadmap CSS moderno, focado em componentes. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Gridpáginas e dashboards
Grid e um topico essencial da fase "Layout" do Roadmap CSS moderno, focado em páginas e dashboards. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Container queriescomponentes adaptativos
Container queries e um topico essencial da fase "Layout" do Roadmap CSS moderno, focado em componentes adaptativos. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Responsivobreakpoints e fluidos
Responsivo e um topico essencial da fase "Layout" do Roadmap CSS moderno, focado em breakpoints e fluidos. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Variáveis CSStokens
Variáveis CSS e um topico essencial da fase "Sistema" do Roadmap CSS moderno, focado em tokens. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Tipografia e ritmoescala
Tipografia e ritmo e um topico essencial da fase "Sistema" do Roadmap CSS moderno, focado em escala. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Cor e contrastea11y
Cor e contraste e um topico essencial da fase "Sistema" do Roadmap CSS moderno, focado em a11y. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Dark modeprefers-color-scheme
Dark mode e um topico essencial da fase "Sistema" do Roadmap CSS moderno, focado em prefers-color-scheme. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Tailwind ou CSS Modulespick one
Tailwind ou CSS Modules e um topico essencial da fase "Tooling" do Roadmap CSS moderno, focado em pick one. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Animação sóbriamotion com propósito
Animação sóbria e um topico essencial da fase "Tooling" do Roadmap CSS moderno, focado em motion com propósito. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Lighthouse a11ychecagem
Lighthouse a11y e um topico essencial da fase "Tooling" do Roadmap CSS moderno, focado em checagem. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Detalhamento por fase
1 Fase 1 - Layout
Objetivo da fase: consolidar o aprendizado pratico de layout.
Flexbox - componentesessencial
Flexbox e um topico essencial da fase "Layout" do Roadmap CSS moderno, focado em componentes. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Grid - páginas e dashboardsessencial
Grid e um topico essencial da fase "Layout" do Roadmap CSS moderno, focado em páginas e dashboards. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Container queries - componentes adaptativosopcional
Container queries e um topico essencial da fase "Layout" do Roadmap CSS moderno, focado em componentes adaptativos. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Responsivo - breakpoints e fluidosessencial
Responsivo e um topico essencial da fase "Layout" do Roadmap CSS moderno, focado em breakpoints e fluidos. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
2 Fase 2 - Sistema
Objetivo da fase: consolidar o aprendizado pratico de sistema.
Variáveis CSS - tokensessencial
Variáveis CSS e um topico essencial da fase "Sistema" do Roadmap CSS moderno, focado em tokens. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Tipografia e ritmo - escalaessencial
Tipografia e ritmo e um topico essencial da fase "Sistema" do Roadmap CSS moderno, focado em escala. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Cor e contraste - a11yessencial
Cor e contraste e um topico essencial da fase "Sistema" do Roadmap CSS moderno, focado em a11y. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Dark mode - prefers-color-schemeopcional
Dark mode e um topico essencial da fase "Sistema" do Roadmap CSS moderno, focado em prefers-color-scheme. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
3 Fase 3 - Tooling
Objetivo da fase: consolidar o aprendizado pratico de tooling.
Tailwind ou CSS Modules - pick oneessencial
Tailwind ou CSS Modules e um topico essencial da fase "Tooling" do Roadmap CSS moderno, focado em pick one. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Animação sóbria - motion com propósitoopcional
Animação sóbria e um topico essencial da fase "Tooling" do Roadmap CSS moderno, focado em motion com propósito. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Lighthouse a11y - checagemessencial
Lighthouse a11y e um topico essencial da fase "Tooling" do Roadmap CSS moderno, focado em checagem. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Perguntas frequentes
Quanto tempo leva para concluir o Roadmap CSS moderno?
O tempo estimado e de ~4–8 semanas, dependendo da dedicacao diaria e pratica constante.
Por onde comecar do zero absoluto?
Inicie pela Fase 1 pelos nos marcados como essenciais antes de avancar para topicos avancados.
Como usar este roadmap
- Siga as fases na ordem — pular fundamentos cria buracos difíceis de fechar depois.
- Cada nó essencial precisa de um artefato: repo, deploy, checklist marcado ou demo.
- Ajuste o ritmo à sua rotina; a métrica é entrega, não data no calendário.
- Volte aos nós opcionais quando o núcleo estiver sólido.