Minificador de CSS

O que o minificador faz

Transformações (nunca mudam o comportamento):

• Remover comentários (todos, incluindo blocos /*! de licença).
• Remover espaços em branco desnecessários (entre seletores, declarações, chaves).
• Remover ponto e vírgula finais antes de chaves de fechamento.
• Colapsar regras de várias linhas em uma linha.

É só isso que ele faz, e por isso a saída se comporta exatamente como o original: cada seletor, propriedade e valor permanece como você o escreveu.

Economias típicas

Além da minificação, a compressão gzip no servidor adiciona mais 60-80% de economia porque o CSS é altamente redundante. Os dois se acumulam; sempre faça ambos.

O que a minificação não faz

• Remover CSS não utilizado. Isso é território de tree-shaking / PurgeCSS, que requer a análise do seu HTML ou componentes.
• Encurtar cores hexadecimais, colapsar unidades zero ou mesclar declarações. Essas transformações agressivas são trabalho do cssnano, esbuild ou Lightning CSS, não desta ferramenta.
• Mesclar seletores duplicados em um só. Arriscado porque a ordem de origem afeta a cascata; alguns minificadores tentam, a maioria ignora.
• Renomear classes. Isso é CSS-in-JS ou CSS Modules, não minificação.
• Inline CSS crítico. Isso é um passo separado no tempo de construção.

Preservando comentários de licença

Muitos minificadores preservam comentários que começam com /*!, usados para cabeçalhos de licença:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

Esta ferramenta remove todos os comentários. Se o seu CSS tiver cabeçalhos de licença, adicione-os novamente após minificar ou use uma ferramenta de construção com opção de preservar licenças, como cssnano ou esbuild.

Mapas de origem

Para depuração em produção, as ferramentas de construção geram um mapa de origem junto com a saída minificada:

styles.min.css
styles.min.css.map

As DevTools podem ler o mapa e mostrar os números das linhas originais formatadas quando você inspeciona um elemento. Esta ferramenta não gera mapas de origem.

Minificação de CSS em um pipeline de construção

• Vite, Webpack, Parcel: lidam com isso automaticamente em construções de produção.
• PostCSS com cssnano: o minificador padrão autônomo.
• esbuild: também inclui minificação de CSS.
• predefinições cssnano: default para transformações seguras, advanced para agressivas (com algumas compensações).

Esta ferramenta é para minificação pontual, correções rápidas e aprendizado sobre o que os minificadores realmente fazem. Para um fluxo de trabalho de produção, use uma ferramenta de construção para que sua fonte permaneça legível e apenas a saída seja minificada.

Quando a minificação pode quebrar seu CSS

Raro, mas possível:

• Seletores sensíveis a espaços: .foo .bar vs. .foo.bar, o espaço importa.
• Valores de propriedades personalizadas com espaços: --shadow: 0 2px 4px rgba(0,0,0,0.1), as vírgulas dentro de rgba() não devem ser removidas.
• Comentários de bloco não fechados: /* falta fechamento consome tudo depois dele. Minificadores podem se comportar mal com entradas malformadas.

A solução: sempre execute sua saída minificada através de uma verificação de lint/teste antes de enviar.