CSS Minifier — Minificador de CSS

O que o minificador de CSS faz

Esta ferramenta reduz folhas de estilo com o CSSO (CSS Optimizer), um minificador que entende CSS em vez de tratá-lo como texto simples. Na primeira passagem, ele faz limpezas seguras: remove espaços em branco e comentários, encurta cores (#ff0000 vira red e #ffffff vira #fff), tira as unidades de valores zero, elimina aspas e ponto e vírgula redundantes e escreve os números na forma mais curta. O resultado é um CSS exatamente equivalente e visivelmente menor.

Com restructure (reestruturar) ativado, o CSSO vai além e otimiza a estrutura da folha de estilo. Regras com o mesmo seletor são mescladas, seletores que compartilham declarações idênticas são agrupados, propriedades sobrescritas mais adiante na mesma regra são descartadas e declarações longas, como margens separadas, podem ser condensadas em uma forma abreviada. O CSSO tem o cuidado de preservar a cascata: só move ou mescla regras quando isso não pode alterar qual declaração prevalece.

Como interpretar os resultados

Os selos mostram o tamanho UTF-8 da entrada e da saída e a porcentagem economizada. CSS escrito à mão, com comentários e indentação, costuma encolher de 20 a 50%. A saída de frameworks, que já é compacta, ganhará menos, enquanto folhas de estilo que repetem as mesmas declarações em muitos seletores são as que mais se beneficiam da reestruturação. Os servidores normalmente aplicam gzip ou Brotli por cima, então minificação e compressão se complementam em vez de competir.

Privado e seguro

O minificador roda totalmente no seu navegador: nada é enviado, registrado ou armazenado. Isso o torna prático para CSS crítico inline, modelos de e-mail, widgets incorporados ou correções rápidas em um computador sem suas ferramentas de build habituais. Mantenha os comentários /*! ... */ se a sua folha de estilo incluir licenças de terceiros que precisam ser preservadas. Para sites em produção, adicione um minificador ao seu build para que cada deploy seja otimizado automaticamente e sempre confira o resultado visualmente quando o seu CSS depender de hacks de navegador ou de sintaxe incomum.