Minificar CSS

Como usar Minificar CSS

O CSS tem uma história de adoção improvável. Håkon Wium Lie propôs a ideia de folhas de estilo em cascata em 1994 enquanto trabalhava no CERN, onde Tim Berners-Lee havia criado a web. A proposta era simples: separar o conteúdo (HTML) da apresentação (CSS). Mas os browsers da época não implementavam o padrão, e tanto Netscape quanto Internet Explorer criaram atributos HTML proprietários de estilização — como `font-color` e `bgcolor` — que viraram a norma pelo pior motivo possível: todos usavam. CSS1 só foi adotado de verdade no início dos anos 2000, com a chegada do Internet Explorer 6.

Hoje o cenário é oposto: com frameworks como Tailwind CSS, um arquivo de estilos não otimizado pode ter megabytes de classes utilitárias geradas. O processo de build aplica PurgeCSS ou tree shaking para remover as classes não utilizadas, mas o arquivo resultante ainda pode chegar a dezenas de kilobytes. É aqui que a minificação contribui: remove comentários, whitespace, o ponto-e-vírgula final antes de `}`, otimiza shorthand como `margin: 10px 10px 10px 10px` para `margin: 10px`, e substitui cores longas como `#ffffff` por `#fff`.

O impacto da minificação de CSS no carregamento da página é direto. CSS é um recurso bloqueante de renderização: o browser suspende a exibição da página enquanto baixa e processa todos os arquivos CSS referenciados no cabeçalho da página. Cada kilobyte a menos significa que a renderização inicial começa mais cedo — o que afeta o LCP (Largest Contentful Paint), uma das métricas centrais do Core Web Vitals do Google. Reduzir o CSS não é apenas uma questão de performance: é também uma questão de SEO.