O que é minificação de CSS e por que ela importa
A minificação de CSS é o processo de remover caracteres que facilitam a leitura humana — como indentação, quebras de linha, espaços múltiplos e comentários — sem alterar a interpretação do arquivo pelo navegador.
Arquivos CSS são recursos bloqueantes de renderização: quanto menor o arquivo trafegado pela rede, mais rápido o navegador conclui o First Contentful Paint (FCP) e o Largest Contentful Paint (LCP), melhorando diretamente a experiência do usuário e os indicadores de Core Web Vitals.
Cuidados especiais com calc(), url() e @media
Compressores baseados em expressões regulares simples costumam quebrar folhas de estilo reais ao remover espaços que são sintaticamente obrigatórios. Em calc(100% - 32px), por exemplo, a especificação do CSS exige espaços ao redor dos operadores + e -.
O minificador do RockTools faz análise léxica para proteger strings, url(...), expressões calc(...), combinadores de seletores e licenças /*! ... */.
O que é removido e o que é preservado
| Elemento CSS | Ação do Minificador |
|---|---|
| /* comentário */ | Removido completamente. |
| /*! licença */ | Preservado na saída. |
| ;} | Último ponto e vírgula antes de } é removido. |
| calc(100% - 20px) | Espaços ao redor de + e - são preservados. |
Perguntas Frequentes sobre Minificar CSS
Minificar CSS altera a aparência do meu site?
Não. A minificação remove apenas caracteres redundantes para o navegador (como espaços extras, quebras de linha, comentários comuns e o último ponto e vírgula antes de '}'), mantendo exatamente as mesmas regras visuais.
Por que comentários /*! ... */ são preservados na minificação?
Por convenção do ecossistema front-end, comentários iniciados com '/*!' indicam avisos de licença ou autoria obrigatórios. Nosso compressor remove comentários comuns '/* ... */', mas preserva os blocos '/*! ... */'.
O minificador funciona com calc(), url() e @media queries?
Sim. O algoritmo utiliza um scanner de estado que preserva espaços obrigatórios ao redor dos operadores '+' e '-' dentro de calc(), mantém strings e url() intactos e preserva a sintaxe de @media queries e combinadores de seletores.
Meu código CSS é enviado para algum servidor?
Não. Toda a compressão acontece localmente no seu navegador via JavaScript, garantindo privacidade e resposta instantânea.
