Minificador de CSS

Reduza suas folhas de estilo

O CSS bloqueia a renderização: o navegador não desenha a página até baixar e analisar as folhas de estilo do <head>. Por isso o tamanho do CSS influencia diretamente a rapidez com que sua página aparece. O minificador de CSS remove comentários, espaços, quebras de linha e outros caracteres de que os navegadores não precisam, e mostra a quantidade de caracteres antes e depois.

Os estilos continuam funcionando exatamente igual; só o arquivo fica menor. É ideal para o CSS personalizado de temas do WordPress, Shopify ou AltumCode, para projetos pequenos sem ferramenta de build e para CSS crítico embutido.

Guarde o original legível para edições futuras e publique a cópia minificada.

Como usar o minificador de CSS

1. Cole seu CSS.
2. Envie para minificar.
3. Compare a quantidade de caracteres antes e depois.
4. Copie o CSS minificado para o seu site ou arquivo.

Exemplos

Estilos de um botão

Entrada:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

Resultado:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

O comentário e os espaços somem, #ffffff é encurtado para #fff, 0px vira 0, o valor repetido de margin é unificado e 0.80 vira .8.

Usos comuns

• Minificar o CSS personalizado que você adiciona pelo painel de um tema ou CMS.
• Reduzir folhas de estilo de sites pequenos e landing pages.
• Preparar CSS crítico embutido para uma primeira renderização mais rápida.
• Comprimir o CSS de modelos de e-mail HTML.
• Reduzir a folha de estilo de um site sem processo de build, como um site estático pequeno ou uma landing page.
• Preparar CSS crítico para incluir no <head> de uma página.
• Reduzir o tamanho do CSS personalizado que você cola em um CMS ou construtor de sites.

Dicas e coisas para saber

• Primeiro elimine as regras que você não usa; apagar CSS economiza mais que minificar.
• Mantenha no arquivo-fonte os comentários de que você precisa (como avisos de licença) e confira se eles continuam.
• Teste a página depois de publicar, principalmente se o seu CSS tem truques incomuns.
• Minifique também seu HTML e seus scripts com o minificador de HTML e o minificador de JS. Confira os valores de cor com o conversor de cores.

Casos especiais e limitações

• O resultado é uma única linha longa, o que dificulta achar erros. Mantenha seu arquivo legível e minifique uma cópia.
• Os comentários são removidos, inclusive os de licença. Adicione de volta os créditos que você é obrigado a manter.
• CSS inválido pode ser removido ou alterado. Se algo parecer estranho depois de minificar, procure no original uma chave ou um ponto e vírgula faltando.

Perguntas frequentes

O que um minificador de CSS faz?

Ele remove do CSS os caracteres desnecessários, como espaços e comentários, sem mudar como os estilos funcionam.

CSS minificado é mais rápido?

Sim, arquivos menores são baixados e analisados mais rápido, o que ajuda a página a aparecer antes.

Posso desminificar o CSS?

Você pode formatar de novo com um embelezador, mas os comentários removidos não voltam. Guarde seu arquivo original.

Devo minificar o CSS se uso gzip ou Brotli?

Sim. A compressão e a minificação trabalham juntas para chegar ao menor tamanho de transferência.

Minificar muda a aparência do meu site?

Não deveria. Só são removidos caracteres que os navegadores ignoram, e os valores são encurtados para formas equivalentes como #fff.

Ferramentas relacionadas

• Minificador de HTML: Minifique seu HTML removendo todos os caracteres desnecessários.
• Minificador de JS: Minifique seu JS removendo todos os caracteres desnecessários.
• Conversor de cores: Converta sua cor para vários formatos.
• Calculadora de tamanho de texto: Obtenha o tamanho de um texto em bytes (B), kilobytes (KB) ou megabytes (MB).
• Verificador de HTTP/2: Verifique se um site usa o protocolo HTTP/2.