Minificar CSS

Para onde os bytes realmente vão

A maior parte do ganho vem de espaços em branco e comentários, o que, em uma folha de estilos escrita à mão, é muita coisa — recuo, linhas em branco entre regras e os títulos de seção que tornam um arquivo grande navegável são puro excesso depois que ele vai para o ar. Além disso, os valores são encurtados de formas que não mudam o significado: uma cor escrita como #ffffff vira #fff, 0px vira 0 porque zero não precisa de unidade, o zero inicial de 0.5em some e margin: 10px 10px 10px 10px vira margin: 10px.

O que deliberadamente não é feito é a categoria arriscada. Juntar regras com declarações idênticas, ou reordená-las, muda a cascata — e a cascata é a parte do CSS em que duas regras de mesma especificidade são decididas por qual veio por último. Um minificador que reordena de forma agressiva gera um arquivo menor e, em uma folha de estilos grande, uma página sutilmente diferente. Declarações duplicadas também costumam ser intencionais, deixadas como alternativa para navegadores antigos que ignoram a segunda.

Regras aninhadas e a sintaxe moderna de intervalos em media queries são recusadas, não minificadas, e vale explicar o motivo, porque é o contrário do que a maioria das ferramentas faz. O parser por trás disto é anterior aos dois recursos e, quando encontra algo que não entende, não gera erro — apaga sem avisar, então um bloco aninhado simplesmente some do resultado e a página perde estilos sem que nada seja informado. Recusar o arquivo é a resposta honesta. Se a sua folha de estilos usa aninhamento nativo ou @media (400px <= width <= 700px), use uma das ferramentas abaixo.

Assim como na marcação, avalie o resultado depois da compressão. As folhas de estilos são enviadas comprimidas com gzip ou brotli, e esses algoritmos já lidam muito bem com espaços em branco repetidos — então um arquivo que fica 30% menor ao ser minificado pode encolher só 5% na transferência. O ganho é real e menor do que o número em destaque.

Quando você precisa de outra coisa

O Lightning CSS é a ferramenta certa para folhas de estilos modernas: ele entende aninhamento, intervalos em media queries, funções de cor e tudo o mais que foi adicionado nos últimos anos, minifica mais do que qualquer coisa mais antiga e ainda converte a sintaxe nova para navegadores antigos no caminho. O esbuild --minify style.css é quase tão bom e extremamente rápido. Os dois devem ficar em uma etapa de build, não em uma aba do navegador.

O ganho muito maior costuma ser remover as regras que você não usa. Um site feito com um framework utilitário ou uma biblioteca de componentes costuma enviar folhas de estilos em que a maior parte do arquivo nunca corresponde a nada na página — e o PurgeCSS, ou o build do próprio framework, reduz isso em uma ordem de grandeza. Minificar CSS não usado deixa o CSS não usado menor; apagá-lo é a solução de verdade.