O CSS que eu de fato uso
Douglas Pereira
Eu não tenho uma personalidade de CSS. Tenho uma lista curta, a maior parte agora na linguagem em vez de no preprocessor.
Layout
Flex e grid. gap em vez de truque de margin collapse. Subgrid quando o filho precisa compartilhar track com o pai — MDN: subgrid finalmente é o que a gente fingia com grid interno.
Container queries (@container) para componente que não deveria ligar para o viewport. Card na sidebar não é card no breakpoint de marketing.
Cascade sem briga
@layer para reset, base, components. Utilities por último. Parei a guerra de especificidade. Se o componente precisa de um caso, o caso mora do lado do componente.
Este site usa Tailwind v4 @theme para token e um globals.css fino para bloco de código. A divisão é a mesma ideia de layer: token e primitivo vs chrome pontual.
Cor e tipo
light-dark() e color-mix() quando o nativo chega. prefers-color-scheme como switch default; terceiro tema só se alguém pagar. text-wrap: balance em heading, pretty em corpo longo quando o engine aguenta (CSS Text 4).
h1, h2, h3, h4 { text-wrap: balance; }
a, button {
cursor: pointer;
transition: color 200ms ease, text-decoration-color 200ms ease;
}Focus visível. outline não é decoração que você apaga no reset.