Como usar
- Cole sua folha de estilo em CSS. Textos entre aspas e url() são mantidos exatamente como estão.
- Mantenha Modo em Minificar para deixar o CSS menor, ou escolha Formatar para facilitar a leitura.
- Compare Bytes antes e Bytes depois para ver quanto foi economizado.
- Copie o Resultado, ou baixe-o como styles.css.
O que a minificação remove e o que mantém
Um comentário CSS começa em /* e termina em */, e é removido, exceto um aviso que começa com /*! , que a ferramenta mantém porque costuma trazer a licença ou o crédito. A especificação CSS Syntax (em inglês) define o comentário, e a ferramenta lê os textos entre aspas e os tokens url() pelas mesmas regras, então o conteúdo deles é copiado como está.
Os espaços saem onde a gramática não precisa deles: ao redor de chaves, vírgulas, dois-pontos nas declarações e antes de um ponto de exclamação. O último ponto e vírgula de um bloco sai, porque a chave de fechamento já encerra o bloco. Um espaço antes de dois-pontos em um seletor fica, porque .card :hover significa outra coisa que .card:hover.
a { color : red ; } vira a{color:red}Cores, zeros e as reduções que não são feitas
Uma cor hexadecimal cujos pares se repetem é escrita com três ou quatro dígitos: #ffffff vira #fff e #aabbccdd vira #abcd. As letras são escritas em minúsculas. Uma cor em um seletor nunca é alterada, porque um seletor como #aabbcc nomeia um id.
Um comprimento de 0px no início de um valor vira 0. Dentro de uma função como calc(), e em uma propriedade personalizada que começa com dois hífens, o comprimento fica como está, porque um 0 sem unidade nem sempre é lido como comprimento em todos os contextos. Formatar não altera nenhuma cor nem nenhum comprimento.
- Os tamanhos são contados em bytes UTF-8, que é como um servidor envia o arquivo; uma letra com acento ocupa dois bytes.
- Teste a página depois de minificar, porque um truque raro para um navegador antigo pode depender de um espaço que o minificador remove.
Exemplo resolvido: uma regra com comentário, cor e zero
O texto .card { color: #aabbcc; /* nota */ margin: 0px 10px; } tem um comentário, uma cor hexadecimal cujos pares se repetem e um comprimento zero no início de um valor. A minificação remove o comentário e os espaços, escreve #abc para a cor e 0 para o zero.
O resultado é .card{color:#abc;margin:0 10px}, e a regra funciona exatamente como antes.
Perguntas frequentes
O CSS minificado funciona igual ao original no navegador?
Sim, para o navegador as regras se aplicam do mesmo modo, porque a ferramenta remove só o que a gramática do CSS não precisa. Ainda assim, teste a página depois de minificar, já que um truque raro pode depender de um espaço.
Por que a ferramenta não tira todas as unidades de zero?
Um zero dentro de uma função como calc() e em uma propriedade personalizada nem sempre é lido como comprimento, então a ferramenta encurta 0px só no início de um valor. Assim o resultado continua seguro em todos os casos que ela trata.
Por que, ao formatar, os comentários ficam em linhas próprias?
Cada comentário é escrito em sua própria linha, no nível da regra a que pertence, para que a estrutura da folha de estilo continue fácil de acompanhar. Os avisos que começam com /*! também são mantidos.
A ferramenta verifica se meu CSS tem erros?
Não. Ela lê a estrutura: confere se as chaves, os textos entre aspas e os url() sem aspas são fechados. Ela não verifica se um nome de propriedade ou um valor é válido, então use um validador para isso.
Meu CSS é enviado ou guardado em algum lugar?
Não. A minificação e a formatação rodam no seu navegador. Nada é guardado nem enviado para nosso servidor, então copie o resultado antes de sair da página.
Fontes
- W3C (em inglês): CSS Syntax Module Level 3, consume comments
- W3C (em inglês): CSS Color Module Level 4, hex notation
- MDN (em inglês): CSS comments
Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.