trilha UFPE
O programa
Turmas
Projetos
Materiais
Conheça o Trilha
Inscreva-se
EN
Materiais
Materiais
· Frontend
12. Estilização
19 min de leitura
→
Anterior
11. Next.js
Próximo
13. Performance, Segurança e UX
→
Nesta página
Objetivo da aula
Pré-requisitos
O que você será capaz de explicar ao final
12.1. Panorama: formas de estilizar em React/Next
CSS “tradicional”
CSS Modules (escopo local)
Utility-first (Tailwind)
Component libraries (shadcn/ui, MUI, Chakra)
Trade-offs (o que você troca por quê)
12.2. CSS Modules (escopo local e previsível)
O que é
Modelo mental: por que o “hash” existe?
Uso típico em React/Next
Composição e padrões (sem virar gambiarra)
1) “Classes utilitárias locais”
2) Variantes simples sem acoplar demais
Global CSS vs Modules: quando usar cada um
Boas práticas
Erros comuns (e por que acontecem)
12.3. Tailwind (utility-first com consistência via design system)
O que é Tailwind (modelo mental)
Como pensar classes: um roteiro mental
1) Layout primeiro (estrutura)
2) Tipografia (hierarquia)
3) Cores e estados (feedback)
4) Responsividade (mobile-first)
Organização e legibilidade (sem “className gigante”)
Customização: theme/tokens e dark mode (noção)
Boas práticas com Tailwind
Erros comuns
12.4. Bibliotecas de UI: shadcn, MUI e Chakra (quando e por quê)
shadcn/ui
O que é (e o que não é)
MUI (Material UI)
Chakra UI
Comparativo honesto (sem fanboy)
12.5. Consistência visual (o que separa projeto amador de projeto profissional)
Design tokens (conceito)
Componentização: primitives e variantes
Acessibilidade como parte da consistência
Evitar “pixel chasing”
12.6. Organização de projeto (estilos sem virar bagunça)
Estratégias por stack
Com CSS Modules
Com Tailwind
Com UI libs (MUI/Chakra)
Convenções que evitam caos
12.7. Guia de decisão (como escolher abordagem no seu projeto)
Critérios
Recomendações realistas
12.8. Erros comuns e confusões clássicas
12.9. Glossário rápido
12.10. Resumo final
12.11. Referências