compress Minificador / Embelezador de CSS star

Como Funciona

Minificar reduz o tamanho do arquivo removendo tudo o que um analisador de máquina não precisa mas um leitor humano gostaria de ter: comentários, quebras de linha, indentação e o ponto e vírgula final antes de uma chave de fechamento. Nada disso é significativo para a forma como um navegador aplica os estilos — uma folha de estilo com cada regra em uma linha e sem espaços em branco se comporta exatamente como uma formatada de forma agradável, só que menor e mais rápida de baixar. Isso importa em produção porque o CSS bloqueia a renderização da página até ser baixado e analisado, então reduzir quilobytes do arquivo melhora diretamente a velocidade de carregamento da página, especialmente em conexões lentas.

Embelezar é a operação inversa, e é genuinamente mais difícil: pega um CSS comprimido ou desorganizado e o reindenta com uma declaração por linha, uma regra por bloco, espaçamento consistente ao redor de dois-pontos e chaves. Isso é um tipo de engenharia reversa, porque a formatação original — e especialmente qualquer comentário — desaparece no momento em que um arquivo é minificado; apenas a formatação estrutural (qual seletor vai com quais declarações) pode ser recuperada, não as quebras de linha ou anotações originais do autor. Por exemplo, .btn{color:red;padding:8px} se torna um bloco corretamente indentado com color: red; e padding: 8px; cada um em sua própria linha dentro de .btn { }.

O Que Você Deve Saber

• Ambas as direções preservam o comportamento exatamente. Seletores, propriedades, valores e ordem de cascata permanecem intocados — apenas espaços em branco e comentários mudam, então especificidade e herança funcionam de forma idêntica antes e depois.
• Esta é uma ferramenta leve baseada em regex, não um analisador CSS completo (como o PostCSS). Ela lida corretamente com CSS padrão, mas valores de conteúdo contendo {, } ou ; literais dentro de aspas (raro na prática, visto principalmente em valores gerados de content:) podem não ser formatados perfeitamente.
• A sintaxe Sass/Less não é processada. Aninhamento, variáveis e mixins não são CSS válido por si só, então passam em grande parte inalterados em vez de compilados — você ainda vai precisar do próprio Sass ou Less para transformá-los em CSS puro primeiro.
• Comentários são a única coisa que a minificação descarta permanentemente. Se um comentário documenta uma solução alternativa específica de navegador ou um aviso de "não remova isto", mantenha uma cópia da fonte não minificada em algum lugar — a saída comprimida não tem como trazê-lo de volta.

Uma comparação concreta: uma regra embelezada como .card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); } minifica para .card{border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)} — visivelmente mais curta, e em uma folha de estilo completa com dezenas de regras, comentários e media queries aninhadas, essa economia normalmente fica entre 20% e 40% do tamanho original do arquivo.