Minificador / embelezador CSS
CSS de entrada
CSS de saída
Sobre este minificador e embelezador de CSS
Esta ferramenta comprime CSS removendo comentários, espaços desnecessários e formatação extra.
Você também pode embelezar CSS comprimido para inspecioná-lo, editá-lo, depurá-lo ou revisá-lo com mais facilidade antes de usá-lo em um projeto.
Como usar
- Cole seu CSS no campo de entrada.
- Escolha Minificar para comprimir o CSS ou Embelezar para formatá-lo.
- Copie o resultado e use na sua folha de estilos ou no processo de build.
Dicas
- Use CSS minificado em produção quando quiser arquivos menores.
- Use CSS embelezado ao revisar trechos de terceiros ou estilos gerados.
- Em projetos grandes, mantenha o CSS fonte original no seu repositório.
Verificações após minificar CSS
Preserve os arquivos fonte
Use o CSS minificado como saída, não como o arquivo que você edita. Mantenha o CSS legível ou os arquivos do pré-processador no controle de versão.
Verifique os comentários
A minificação pode remover comentários. Mantenha avisos de licença e comentários de build importantes na fonte ou na configuração do bundler.
Teste o impacto na cascata
A minificação deve preservar o comportamento, mas sempre verifique a ordem dos seletores, as media queries e os hacks de navegador depois de copiar a saída.
Prefira ferramentas de build para apps
Para aplicações em produção, um bundler ou o pipeline do framework costuma ser mais seguro porque preserva source maps e referências a recursos.
Verificações de minificação CSS antes de publicar uma folha de estilos
A compressão deve preservar cascata, sintaxe suportada, custom properties, URLs e compatibilidade com navegadores.
Cascata e ordem
Garanta que combinar ou reordenar regras não altere specificity, layers, fallbacks, overrides ou ordem de origem.
Sintaxe moderna
Teste custom properties, calc(), funções de cor, nesting, container queries, prefixos e fallbacks.
Assets e source maps
Confirme se URLs relativas resolvem a partir do arquivo emitido e os source maps correspondem às rotas publicadas.
Regressão visual
Compare páginas principais entre breakpoints, temas, estados, estilos de impressão e navegadores suportados.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.