Como a minificação reduz o seu CSS
O CSS bloqueia a renderização: o navegador precisa baixar e analisar as folhas de estilo antes de desenhar a página. Por isso, cada kilobyte a menos no CSS ajuda a página a aparecer mais cedo. A minificação remove espaços, quebras de linha, comentários e o último ponto e vírgula de cada bloco, além de encurtar valores, como cores #ffffff para #fff e 0px para 0.
Esta ferramenta usa o CSSO, que vai além de apagar espaços. Com a otimização estrutural, ativada por padrão, ele junta regras com o mesmo seletor, une seletores que têm as mesmas declarações e remove propriedades sobrescritas dentro do mesmo bloco. O resultado mantém a mesma cascata, só que escrita de forma mais curta. Se preferir uma minificação mais conservadora, basta desativar essa opção.
Comentários que começam com /*! normalmente guardam avisos de licença de bibliotecas como Bootstrap ou normalize.css. Você pode mantê-los no resultado ativando a opção de preservar comentários de licença. A ferramenta mostra o tamanho antes e depois e a porcentagem economizada, e se houver um erro de sintaxe exibe a mensagem do analisador.
O código é processado no seu navegador e nunca é enviado a um servidor. O teste grátis cobre um arquivo .css ou um texto colado; você pode reprocessar esse mesmo texto com outras opções, mas um novo conteúdo pede o ToolStudio Pro, com uso ilimitado, vários arquivos de uma vez em um ZIP e sem anúncios.
Como minificar CSS
- Cole o CSS na caixa de entrada ou arraste um arquivo .css.
- Decida se quer a otimização estrutural (junta regras e declarações) e se quer manter os comentários /*! de licença.
- Clique no botão para minificar.
- Veja o tamanho antes e depois e a porcentagem economizada.
- Copie o CSS minificado ou baixe o arquivo.
Quando minificar CSS
- Publicar um site estático sem ferramenta de build.
- Reduzir o CSS crítico que você coloca inline no <head>.
- Compactar o style.css de um tema de WordPress ou de outro CMS.
- Encolher estilos colados em widgets, e-mails ou páginas de terceiros.
- Verificar quanto um CSS antigo pode diminuir com a junção de regras repetidas.
O que a otimização estrutural faz, na prática
Imagine .btn { color: red } em um ponto do arquivo e .link { color: red } em outro. A otimização estrutural pode transformar isso em .btn,.link{color:red}. Da mesma forma, dois blocos .card seguidos com propriedades diferentes viram um só, e uma propriedade declarada duas vezes no mesmo bloco fica apenas com o último valor.
O CSSO só faz essas mudanças quando elas não alteram a ordem efetiva da cascata. Mesmo assim, se o seu CSS depende de hacks específicos de navegadores antigos, compare o resultado com a otimização ativada e desativada.
Perguntas Frequentes
Qual a diferença entre minificar e otimizar CSS?
Minificar remove espaços, comentários e caracteres desnecessários. A otimização estrutural do CSSO também reorganiza o código, juntando regras e declarações repetidas, o que costuma reduzir ainda mais o tamanho.
Posso manter o aviso de licença?
Sim. Ative a opção de manter comentários de licença e os comentários que começam com /*! são preservados.
Funciona com SCSS ou Less?
Não. O minificador espera CSS puro. Compile o SCSS ou o Less antes; para apenas organizar arquivos SCSS ou Less, use o formatador de CSS.
Meu CSS é enviado para um servidor?
Não. Todo o processamento acontece no seu navegador.
É grátis?
Você pode testar com um arquivo ou um texto colado e reprocessar esse mesmo texto com outras opções. Para minificar novos conteúdos é preciso o ToolStudio Pro, que inclui uso ilimitado, vários arquivos de uma vez em ZIP e nenhum anúncio.