Minificar CSS para Acelerar seu Site
Remova comentários e espaços desnecessários do seu CSS para reduzir o tamanho do arquivo na hora.
Sua folha de estilo fica no seu aparelho
Nada para apagar depois
Seguro para interfaces não lançadas
Funciona em todo navegador moderno
Como funciona
- 1
Cole seu CSS
Uma folha de estilo, os estilos de um componente ou um bloco que você quer menor antes de publicar.
- 2
Confira os tamanhos
Compare minificado e comprimido, e leia os avisos antes de substituir o original.
- 3
Copie a saída
Leve para uma saída de build, um bloco `<style>` ou um template.
Por que usar esta ferramenta
Ordem das declarações preservada
Nada é reordenado, porque a cascata desempata por posição e mover uma regra muda o que é renderizado.
Fallbacks intactos
Uma propriedade declarada duas vezes costuma ser um fallback deliberado para navegadores antigos, não duplicação a apagar.
Sem fusão insegura de atalhos
Juntar propriedades longas num atalho zera os lados que você não mencionou, então isso não é feito em silêncio.
Tamanho comprimido mostrado
O número minificado ao lado do número gzip, porque só o segundo é o que o navegador baixa.
Analisada onde ela pertence
Um navegador já é um motor de CSS, então nenhuma requisição é necessária e o arquivo simplesmente fica na página.
Sem limites e sem cadastro
Use numa única regra ou no build de um framework, quantas vezes quiser.
Ordem é significado, e isso limita o que um minificador pode fazer com segurança
O CSS resolve declarações concorrentes primeiro por especificidade e depois por ordem de documento: quando duas regras têm o mesmo peso, ganha a escrita depois. Isso torna a posição parte do significado de uma folha de estilo, e é por isso que otimizar de forma agressiva é mais arriscado aqui do que na maioria das linguagens. Uma ferramenta que agrupa todas as regras com o mesmo seletor, ou ordena declarações para comprimir melhor, ou funde dois blocos que por acaso declaram as mesmas propriedades, pode produzir um arquivo menor byte a byte e visualmente diferente — porque uma regra que vinha por último já não vem. As reduções sempre seguras são as que não movem nada: tirar espaços, tirar comentários e encurtar valores cujo significado é fixo. Tudo que reordena precisa entender a sua cascata inteira, e uma ferramenta em nível de texto não entende.
A mesma propriedade duas vezes costuma ser fallback, não erro
Este é o caso específico em que “remova a duplicata” quebra uma página. Declarar uma propriedade duas vezes no mesmo bloco é a forma padrão de dar suporte a navegadores antigos: `color: #ccc` seguido de `color: rgba(0, 0, 0, .5)` significa que o navegador que entende a segunda a usa e o que não entende volta para a primeira, porque uma declaração não interpretável é descartada em vez de fatal. O mesmo padrão cobre `display: -webkit-box` antes de `display: flex`, uma largura em pixels antes de uma largura com `calc()` e uma cor sólida antes de um gradiente. Um minificador que vê duas declarações de uma propriedade e guarda só a última removeu o suporte; o que guarda só a primeira removeu o recurso. Os dois estão errados, e o comportamento correto é deixar o par em paz.
Fundir propriedades longas num atalho zera o que você não mencionou
Esta é a armadilha de correção mais sutil na otimização de CSS. Se uma regra define `margin-top` e `margin-left`, juntá-las numa única declaração `margin` não deixa os outros dois lados como estavam — um atalho define todas as propriedades do seu grupo, então os lados não mencionados são zerados para os valores iniciais, descartando o que fora herdado ou definido por uma regra anterior. `background` é pior, porque zera uma lista longa incluindo `background-size` e `background-position`, então uma fusão pode desfazer em silêncio um `background-size: cover` declarado em outro lugar. `font` se comporta igual com `line-height`. A economia dessas fusões é pequena e a falha é um layout que parece certo no arquivo e errado no navegador, e é por isso que esta ferramenta não as faz.
O grande ganho são as regras não usadas, e é mais difícil do que parece
Minificar uma folha de estilo apara talvez um quinto. Remover as regras que uma página nunca usa pode aparar noventa por cento, porque um framework de propósito geral entrega estilos para cada componente e cada variante enquanto uma página dada usa um punhado. É ali que está o tamanho real — e fazer isso com segurança é genuinamente difícil, por uma razão específica do CSS. Uma ferramenta de purga funciona varrendo seus templates e seu código em busca de nomes de classe e mantendo as regras que casam. Ela não consegue ver um nome de classe montado em tempo de execução, então `"btn-" + variant` não parece nada para ela, e a regra de `btn-danger` é apagada enquanto o código que precisa dela continua rodando. Tudo construído dinamicamente, injetado por um widget de terceiros ou acrescentado por JavaScript depois do carregamento precisa ser listado como exceção, e é essa lista que faz da purga um projeto e não um interruptor.
CSS bloqueia a renderização, então o tamanho dele custa outra coisa
Por que o tamanho importa não é a mesma coisa para CSS e para scripts. Um navegador não vai pintar conteúdo que uma folha pendente possa reestilizar, então uma folha no cabeçalho bloqueia a renderização: até ela chegar e ser analisada, a página fica em branco. Isso faz o custo do peso do CSS cair direto sobre a primeira pintura, a parte do carregamento que os usuários mais notam, e é o argumento mais forte para manter pequena a folha crítica. Também explica por que o conselho padrão é embutir a pouca CSS necessária para a área visível e carregar o resto de forma assíncrona — uma mudança estrutural que ajuda muito mais que a minificação. Se você só pode fazer uma coisa, dividir a folha ganha de comprimi-la.
Por que minificar localmente importa neste tipo de arquivo
Uma folha de estilo é menos obviamente confidencial que código de aplicação e ainda assim descreve mais do que as pessoas notam. Nomes de classe mapeiam a sua interface: nomeiam componentes que não foram lançados, variantes de um experimento ainda em curso, painéis que só administradores veem e recursos atrás de uma flag. Comentários em CSS são francos de um jeito que comentários em outros lugares não são — um nome de cliente, uma nota sobre qual navegador quebrou, um lembrete de que um valor é gambiarra para um bug de uma versão específica. Colar uma folha de produção num minificador hospedado entrega tudo isso por uma redução de tamanho disponível localmente. Esta ferramenta processa o arquivo na página e não transmite nada, o que você confere na aba Rede das ferramentas de desenvolvedor.
Erros comuns que vale evitar
- Remover uma propriedade declarada duas vezes num bloco. Isso é quase sempre um fallback deliberado para navegadores antigos — guardar só uma das duas remove o suporte ou o recurso.
- Fundir propriedades longas num atalho. Um atalho define todas as propriedades do seu grupo, então os lados que você não mencionou são zerados para os valores iniciais.
- Deixar uma ferramenta reordenar ou agrupar regras para comprimir melhor. A cascata desempata por ordem de documento, então um arquivo menor pode renderizar diferente.
- Esperar que a minificação resolva o tamanho da folha. Regras não usadas costumam ser o volume; a minificação apara cerca de um quinto do que uma passada de CSS não usado apararia.
- Purgar CSS não usado sem listar nomes de classe dinâmicos. Um nome montado como `"btn-" + variant` é invisível para um scanner, então a regra dele é apagada enquanto o código ainda roda.
Comparação
| Item | Esta ferramenta | Minificadores online | Um pipeline de build |
|---|---|---|---|
| Folha enviada a um servidor | Nunca | Geralmente sim | Não |
| Preserva a ordem das declarações | Sempre | Geralmente | Geralmente |
| Mantém fallbacks de navegador | Sim | Varia | Configurável |
| Remove regras não usadas | Não | Não | Com um passo de purga |
| Tamanho comprimido mostrado | Sim | Raramente | Com um plugin |
| Preço | Grátis | Grátis / planos pagos | Grátis |
Recursos
Remoção de espaços e comentários
Tudo que o parser ignora é descartado, incluindo as linhas em branco que agrupam as suas regras.
Encurtamento seguro de valores
Cores reduzidas à forma equivalente mais curta e unidades zero cortadas, onde o significado não pode mudar.
Seguro para ordem por projeto
As regras mantêm suas posições, então especificidade e ordem de origem continuam resolvendo do mesmo jeito.
Os dois tamanhos reportados
Bruto e comprimido, já que a compressão por si só reduz a maior parte do que a minificação remove.
Sintaxe moderna entendida
Propriedades personalizadas, aninhamento, container queries e camadas passam sem serem estragadas.
Aguenta folhas grandes
O build de um framework inteiro minifica sem upload nem teto de tamanho.
Nada para instalar
Sem ferramenta de build, sem runtime, sem dependências — funciona na página web.
Compatível com árabe e RTL
Interface completa em oito idiomas, incluindo árabe da direita para a esquerda.
Seguro por padrão
Servido por HTTPS, sem rastreio de conteúdo e sem envio a terceiros.
Quem usa
Desenvolvedores front-end
Reduzir uma folha de estilo que não passa por um passo de build.
Engenheiros de performance web
Reduzir a folha que bloqueia a renderização e represa a primeira pintura.
Desenvolvedores de e-mail
Compactar estilos que precisam ser embutidos num template com limite de tamanho.
Quem embute um bloco de estilo
Deixar os estilos de um componente pequenos o bastante para o cabeçalho de uma página.
Perguntas Frequentes
Não. Tudo roda localmente no seu navegador — seu texto nunca é enviado, armazenado ou compartilhado.
Sim — totalmente grátis, sem conta e sem limites.