1. Fundamentos do CSS moderno

Eu começo pelos alicerces: cascade, especificidade e herança. Entender como regras se combinam e como a ordem de carregamento afeta o resultado evita conflitos difíceis de depurar. Em paralelo, adotamos unidades modernas e tokens de design para manter consistência entre componentes.

• Cascade e especificidade: como prever quando uma regra vence outra.
• Unidades modernas: rem, em, vw/vh, vmin/vmax para escalar de forma previsível.
• Custom properties (variáveis CSS): tokens de design que facilitam alterações de tema.
• Box model e resets leves: box-sizing: border-box; margens e paddings consistentes.
• Camadas e organização de código: pensar em ordem de aplicação das regras para alcançar menor acoplamento.

2. Layout com Flexbox e Grid: quando usar cada um

Flexbox resolve alinhar itens ao longo de um eixo com facilidade, ideal para cabeçalhos, menus e componentes lineares. Grid está mais adequado para layouts bidimensionais, como grelhas de cards, seções de conteúdo e áreas com várias linhas e colunas.

/* Exemplo: grid de cards responsivo com CSS moderno */
:root {
  --gap: 1.25rem;
  --card: #ffffff;
  --bg: #0b1020;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: ui-sans-serif, system-ui, -apple-system; background: var(--bg); color: #1b1e29; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); padding: 1rem; }
.card { background: var(--card); border-radius: 12px; padding: 1rem; box-shadow: 0 8px 20px rgba(0,0,0,.12); }

3. Tipografia, cores e responsividade

A tipografia é parte crucial da legibilidade. Utilize clamp() para tamanho de fonte fluido, combinando com unidades relativas e media queries simples para manter legibilidade em telas variadas.

• Fluid typography com clamp(min, preferred, max).
• Tokens de cor para consistência entre componentes.
• Acessibilidade: contraste adequado e modo claro/escuro quando aplicável.
• Media queries simples para ajustes finos em breakpoints comuns.

4. Boas práticas, performance e fluxo de trabalho

Neste ponto, foco na manutenção de código limpo e previsível. Estruture o CSS em camadas ou módulos, evite seletores excessivamente específicos e aproveite tokens de design para consistência visual.

• Modularize estilos por componente e descreva claramente a intenção (nomeação clara, sem gambiarras).
• Priorize CSS crítico para o load inicial e adie o restante apenas se necessário.
• Adote estratégias simples de theming para facilitar mudanças de aparência sem tocar no conteúdo.
• Teste em diferentes dispositivos para confirmar a responsividade e a legibilidade.