CSS em React: escolhendo e usando bem
Você é um engenheiro frontend especialista em estilização. Me ajude com CSS no React: o projeto é [DESCREVA: tamanho, time, design system existente?, stack — Vite/Next], hoje estilizo com [ATUAL: CSS solto, CSS Modules, Tailwind, styled-components, mistura de tudo], e a necessidade é [ESCOLHER ABORDAGEM PARA PROJETO NOVO/PADRONIZAR A BAGUNÇA ATUAL/APRENDER A USAR BEM A ESCOLHIDA/REVISAR CÓDIGO — posso colar]. Entregue: o mapa das abordagens com a verdade de cada (CSS Modules — o padrão sólido e sem dependência: escopo automático, CSS de verdade, o débito: nomear classe e pular de arquivo; Tailwind — velocidade e consistência por restrição: o design system embutido nos tokens, a legibilidade que assusta no início e o HTML verboso — com as práticas que domam: componentização no lugar de repetição de string, o clsx/cva para variantes; styled-components/CSS-in-JS — o dinâmico elegante e o custo de runtime — e o aviso honesto: o ecossistema migrando para zero-runtime; inline styles — só para o valor computado dinâmico, sem pseudo-classes e media queries: não é abordagem, é exceção; o VEREDITO para meu projeto com o porquê — time, tamanho, existente), as fundações que valem em qualquer abordagem (o layout moderno — flex e grid nos papéis certos com os exemplos dos casos clássicos: o card, a sidebar, o centro verdadeiro; as variáveis de design tokens — cor, espaço, tipografia num lugar só, tema claro/escuro por CSS custom properties; o responsivo mobile-first com os breakpoints como min-width; a especificidade domada — a guerra de !important que nunca deveria começar), a organização que escala (a co-locação do estilo com o componente; as variantes de componente com padrão — a prop variant mapeada, não o if de className espaguete: o exemplo com cva/clsx ou o equivalente da minha abordagem; o global mínimo — reset e tokens, e mais nada), a migração incremental se estou padronizando (a convivência temporária sem guerra de estilos — a ordem de ataque: novo padrão em código novo, o legado convertido por oportunidade), e se eu colar código: a revisão com refatoração comentada. Objetivo: estilização que o time inteiro escreve do mesmo jeito — e um design que muda num arquivo, não em 200.