Como usar o formatador de CSS
- Cole seu CSS na caixa de entrada: uma folha de estilo minificada, um trecho copiado das ferramentas do desenvolvedor ou um arquivo inteiro.
- Clique em Formatar para colocar cada declaração em sua própria linha, com indentação consistente.
- Clique em Minificar para remover comentários e espaços em branco; a ferramenta mostra quantos bytes você economizou.
- Copie a saída para o seu projeto.
Todo o processamento acontece no seu navegador, e suas folhas de estilo nunca são enviadas nem armazenadas.
Por que formatar ou minificar CSS?
CSS (Cascading Style Sheets, ou folhas de estilo em cascata) descreve como o HTML é exibido. Uma folha de estilo é uma lista de regras, cada uma formada por um seletor e um bloco de declarações (property: value;). Os navegadores ignoram a maior parte dos espaços em branco, então as mesmas regras podem ser escritas de forma legível ou comprimidas em uma única linha.
Formatar é útil quando você precisa ler ou editar um CSS que chegou minificado, por exemplo um tema de terceiros ou uma folha de estilo que você está depurando em um site no ar. Minificar é para produção: remover comentários, quebras de linha, indentação e o último ponto e vírgula de cada bloco deixa os arquivos menores, então eles baixam mais rápido. A minificação complementa, e não substitui, a compressão gzip ou Brotli no servidor.
Aqui está a mesma regra das duas formas:
.btn-primary:hover,.btn-primary:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}.btn-primary:hover,
.btn-primary:focus {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
}Erros comuns em CSS e como corrigi-los
Os navegadores não param diante de um erro de CSS. Eles pulam a declaração ou regra inválida e seguem em frente, e é por isso que um erro de digitação muitas vezes faz apenas um estilo "silenciosamente" deixar de ser aplicado. O CSS formatado facilita muito encontrar esses problemas.
Ponto e vírgula esquecido. A declaração seguinte é engolida pelo valor anterior e as duas se tornam inválidas:
.title {
color: #222
margin-bottom: 1rem;
}Adicione o ponto e vírgula depois de #222. Na saída formatada, duas propriedades acabarem na mesma linha lógica é um indício.
Chaves desbalanceadas. Uma } faltando faz as regras seguintes virarem parte do bloco anterior. Se a indentação de repente subir um nível depois da formatação, procure a chave que falta logo acima.
Unidades ausentes. Exceto no zero, os comprimentos precisam de uma unidade: margin: 10; é inválido, margin: 10px; está correto. Valores sem unidade só são válidos em propriedades que aceitam números simples, como line-height, opacity ou z-index.
Seletores inválidos em uma lista. Se um seletor de uma lista separada por vírgulas for inválido, a regra inteira é descartada. Isso costuma acontecer com pseudoelementos específicos de cada fabricante de navegador:
/* Se qualquer um dos seletores não for suportado, nenhum recebe o estilo */
input::-webkit-input-placeholder, input::-moz-placeholder { color: #888; }Escreva regras separadas ou use o padrão ::placeholder.
Minificar é seguro?
Remover espaços em branco é seguro em quase todos os casos, mas alguns detalhes importam:
| Situação | O que saber |
|---|---|
calc() | Os espaços em volta de + e - são obrigatórios. calc(100% - 2rem) funciona; calc(100%-2rem) não. Um minificador correto os mantém. |
| Comentários de licença | Comentários que começam com /*! são preservados por convenção por muitos minificadores, para manter licenças. Confira a saída se você depende disso. |
Strings e content | Os espaços dentro de strings entre aspas fazem parte do valor e devem ser mantidos. |
| Hacks | Hacks antigos para navegadores que dependem de uma sintaxe exata podem não sobreviver à minificação. |
Dicas e boas práticas
- Mantenha o código-fonte legível no controle de versão e gere os arquivos minificados durante o build, de preferência com source maps para depuração.
- Agrupe declarações relacionadas sempre do mesmo jeito (layout, modelo de caixa, tipografia, aparência) para que as regras sejam fáceis de percorrer.
- Use propriedades personalizadas do CSS (
--brand: #0b5ed7;) em vez de repetir valores de cor. - Para blocos
<style>embutidos no HTML, o Formatador de HTML pode ser mais prático.
Perguntas frequentes
Minificar o CSS muda a aparência do meu site?
Não. Um minificador correto só remove caracteres de que o navegador não precisa, como comentários e espaços em branco fora das strings. A página renderizada deve ficar idêntica.
Quanto meu CSS vai diminuir?
Depende de como o arquivo foi escrito. Folhas de estilo muito comentadas e com indentação generosa encolhem mais do que as que já são compactas. A ferramenta mostra o tamanho exato antes e depois para o seu arquivo.
Dá para desminificar um CSS?
Dá, e é isso que o recurso de formatar faz. A indentação e as quebras de linha são restauradas, mas os comentários removidos na minificação não podem ser recuperados.
Ele aceita SCSS ou Less?
A ferramenta foi feita para CSS puro. Um SCSS simples costuma ser formatado de modo aceitável, mas recursos como regras aninhadas com mixins ou operações do Less podem não ser tratados corretamente.
Atualizado