Minificador de CSS

Remover espaços em branco e comentários é a parte óbvia e fácil da minificação — todo minificador faz isso, e sozinho é pouco mais que um buscar-e-substituir. A parte que separa um minificador de CSS de verdade, consciente da linguagem, da simples remoção ingênua de espaços em branco é tudo que exige realmente entender a folha de estilo: a compressão de valores abreviados, onde uma cor escrita como `#ffffff` vira `#fff` e unidades zero redundantes são cortadas, e a mesclagem de regras duplicadas ou sobrepostas, onde duas regras que acabam aplicando as mesmas declarações são combinadas em uma só. As duas exigem primeiro analisar o CSS em uma estrutura real — saber qual seletor se aplica a quais declarações, e quais valores são equivalentes — que é por isso que o csso constrói uma árvore de sintaxe de verdade em vez de comparar padrões de texto, a mesma razão pela qual um analisador de verdade compensa o esforço em relação a uma simples passagem de regex.

Ferramentas de build modernas minificam sua saída de CSS automaticamente como parte de um build de produção, então, para qualquer pessoa trabalhando dentro de um projeto empacotado, a minificação já acontece de forma invisível toda vez que faz um build. Uma ferramenta avulsa como esta cobre o que fica fora desse pipeline: um CMS ou plataforma sem nenhum processo de build, um trecho avulso e rápido que precisa caber em algum lugar com restrição de tamanho, ou simplesmente verificar o quanto uma determinada folha de estilo encolheria antes de decidir se vale a pena configurar as ferramentas. Para um único arquivo necessário uma vez, colar aqui e copiar o resultado de volta é o caminho mais rápido para a mesma saída que um bundler produziria.

Um minificador consciente de CSS é deliberadamente conservador sobre o que vai mesclar ou reescrever: propriedades personalizadas (variáveis CSS), media queries, animações keyframe e declarações com prefixo de fornecedor são todas preservadas exatamente como escritas, porque colapsá-las incorretamente poderia mudar silenciosamente como uma página renderiza em alguns navegadores ou tamanhos de tela, em vez de só mudar a aparência do código-fonte. As otimizações que são seguras de fazer automaticamente — espaços em branco, comentários, valores abreviados, regras genuinamente duplicadas — são as que não têm nenhum efeito possível sobre a página renderizada, que é o princípio de design por trás de usar um analisador real em vez de uma abordagem mais bruta e arriscada de buscar-e-substituir.