Minificador de CSS online para um site mais rápido

Introdução

O CSS que você escreve e o CSS que vai para o ar não precisam ter a mesma aparência. Enquanto você mexe numa folha de estilos, a indentação, as linhas em branco entre as regras e os comentários explicando por que cada regra existe deixam o código mais fácil de ler e de manter. Nada disso ajuda o navegador a desenhar a página — ele só precisa de seletores, propriedades e valores válidos, e não liga para o espaçamento nem para o fato de uma regra estar explicada. Minimizar tira tudo o que existe apenas para quem lê o código, de modo que as mesmas regras chegam ao navegador num arquivo menor. Numa folha de estilos curta, a economia pode ser de alguns kilobytes; numa que foi crescendo ao longo de um projeto mais demorado, com várias rodadas de ajustes e comentários esquecidos da fase de testes, o corte no que precisa ser baixado antes de a página aparecer direito pode ser bem significativo.

Como esta ferramenta minimiza o seu CSS

Colar o CSS e clicar em «Minimizar» faz bem mais do que apagar espaços:

• Os comentários são removidos, com uma exceção. Um comentário escrito na convenção usual /*! ... */, ou que contenha a palavra @license ou @preserve, é mantido. Essa é a maneira padrão de marcar um comentário como aviso de licença ou de autoria para que as ferramentas de build não o apaguem. Já um comentário explicativo comum, como /* button hover state */, some — se você precisa manter um cabeçalho de licença, escreva-o em uma dessas formas.
• Espaços, quebras de linha e regras vazias são removidos. Tudo o que não for necessário para separar um elemento do seguinte cai fora, e um bloco de regra que ficou vazio (um seletor como .old-banner {} sem nada dentro) é apagado por completo em vez de ser carregado como peso morto.
• Alguns valores são encurtados sem mudar de significado. Uma cor escrita como #ffffff vira #fff, os zeros supérfluos são aparados (0.500 vira .5, e um valor como -0px vira 0), e as palavras-chave normal e bold usadas em font-weight são convertidas nos equivalentes numéricos, 400 e 700.
• As propriedades personalizadas do CSS e as expressões calc() ficam protegidas. Variáveis definidas com o prefixo -- (por exemplo --brand-color) e expressões calc() dependem de sinais e espaços que quebrariam se fossem comprimidos como um valor qualquer, então elas são postas de lado antes das etapas de limpeza de espaços e de corte de zeros, e devolvidas intactas depois.

O que saber antes de minimizar

Esta ferramenta não reordena, não junta nem elimina regras repetidas — a saída traz os mesmos seletores na mesma ordem, só que compactados. Se o que você procura é algo que remova o CSS que a sua página nem chega a usar, isso é outro tipo de ferramenta, não um minimizador. Como aqui a minimização acontece tirando espaços e encurtando valores, e não reinterpretando a estrutura das regras, o conteúdo aninhado — as regras dentro de uma consulta @media, por exemplo — permanece no lugar, e o que está dentro dele é compactado como todo o resto.

Não existe aqui um limite de tamanho próprio como nas ferramentas de envio de arquivos deste site: você está colando texto em vez de enviar um arquivo, então o teto na prática é o que o seu navegador aguenta com folga num campo de texto, o que cobre qualquer folha de estilos que você vá escrever à mão. Para uma folha de estilos realmente grande, como o pacote inteiro de um framework em vez dos estilos de uma página ou de um projeto, uma etapa de build dentro do seu processo de publicação costuma se encaixar melhor do que colar tudo numa ferramenta do navegador.

Minimizar aqui não altera o que o seu CSS faz, mas ainda assim vale dar uma olhada rápida numa página com o resultado minimizado antes de publicar ou entregar — o mesmo hábito de reler qualquer outra coisa antes de mandar.

Quando esta é a ferramenta certa

• Preparar um trabalho de turma ou um site pessoal para publicação. Um arquivo CSS menor carrega mais rápido, e isso pesa mais do que parece na rede da escola ou num celular usando dados móveis.
• Ver como é de fato o código de produção. Quem olha o código-fonte de um site real costuma encontrar um CSS que não se parece nada com o que se escreve em aula — minimizar a sua própria folha de estilos e comparar lado a lado com o original é um jeito concreto de entender por quê, e combina bem com o CSS Beautifier para o caminho inverso.
• Reduzir o peso da página perto de um prazo ou com hospedagem limitada. Algumas hospedagens fornecidas pela escola têm cotas apertadas de espaço ou de tráfego; minimizar os arquivos antes de enviá-los é uma forma rápida de não estourar o limite.

Se você ainda está editando a folha de estilos, continue trabalhando com a versão legível e minimize uma única vez, logo antes de publicar — minimizar é a última etapa, não um formato de trabalho. Para entender melhor por que o tamanho dos arquivos influencia a velocidade de uma página, veja este guia do compressor de CSS para sites mais rápidos.

Exemplo

Um aluno termina o site pessoal da aula de design para a web: folhas de estilo separadas para o layout, para as cores e para as regras responsivas, cada uma com comentários que sobraram de testar ideias diferentes pelo caminho. Antes de entregar o trabalho, ele junta o CSS e cola tudo nesta ferramenta. A página continua com exatamente a mesma aparência e o mesmo comportamento, mas o arquivo que vai junto é menor e não carrega mais os comentários de tentativa e erro escritos durante a construção.

Perguntas frequentes

Minimizar vai mudar a aparência da minha página?

Não. As regras, os seletores e os valores são preservados — mudam só a formatação, os comentários e um punhado de valores encurtados (como as cores em hexadecimal e os zeros supérfluos), e nada disso interfere na forma como a página é desenhada.

O que acontece com os comentários do meu CSS?

Os comentários comuns são removidos. Um comentário escrito como /*! ... */, ou que contenha @license ou @preserve, é mantido — essa é a convenção padrão para marcar um aviso de licença ou de autoria.

Funciona com variáveis de CSS e com calc()?

Sim. As propriedades personalizadas e as expressões calc() ficam protegidas durante a minimização, em vez de serem comprimidas como valores comuns.

Existe limite de tamanho?

Não há um limite fixo como nas ferramentas de envio de arquivos deste site — aqui você cola texto, não envia um arquivo. Colagens muito grandes, como o pacote completo de uma biblioteca, são mais bem resolvidas por uma ferramenta de build dentro do seu processo de publicação.

Meu código fica salvo em algum lugar?

Não. O CSS colado é processado para gerar o resultado minimizado e não é guardado como arquivo nem mantido depois; fica registrado apenas que a ferramenta foi usada, não o código em si.

Posso minimizar mais de uma folha de estilos de uma vez?

Cole e minimize um bloco de CSS por vez. Se precisar minimizar vários arquivos juntos, junte-os antes; caso contrário, repita o processo para cada um.

Quais ferramentas relacionadas posso usar?

Use o CSS Beautifier para reverter o processo e deixar um CSS minimizado legível de novo, ou o HTML Minifier e o JavaScript Beautifier para outras tarefas com código.