Formatador e minificador de CSS

O que é um formatador de CSS?#

Um formatador de CSS faz duas coisas que parecem opostas mas resolvem o mesmo problema: expande CSS comprimido e gerado por máquina para algo que uma pessoa consiga ler, e comprime uma stylesheet inflada para os bytes que realmente importam. A razão para se recorrer a um é quase sempre a de que o CSS chegou na forma errada para o que se está fazendo — uma ferramenta de build despejou uma única linha minificada e precisa-se inspecionar uma regra específica, ou um arquivo escrito à mão inchou e quer-se cortá-lo antes de enviar.

Esta página trata ambas as direções com motores reais. Formatar usa o css_beautify do js-beautify, que re-indenta seletores e declarações de forma previsível. Minificar usa o CSSO, que é um verdadeiro otimizador estrutural em vez de um removedor de espaços em branco: funde regras adjacentes com declarações idênticas, dobra propriedades longhand em shorthands, remove declarações sobrepostas, e só depois colapsa os espaços em branco restantes. O resultado é tipicamente mais pequeno do que o que um compactador ingénuo produz, e semanticamente equivalente à entrada. Essa distinção importa quando se liga a cada byte no fio.

Como usar#

1. Cole o seu CSS no painel da esquerda. Exemplo carrega uma pequena stylesheet se quiser experimentar o comportamento primeiro.
2. Escolha a Indentação na barra de ferramentas: 2, 4 ou tabulação. Dois espaços é a convenção moderna comum; quatro é mais amigável para ler arquivos densos.
3. Clique numa ação:
   • Formatar — re-indentar e quebrar linhas através do js-beautify. Os seletores ficam na sua própria linha, as declarações alinham-se dentro das chavetas.
   • Minificar — executar a otimização estrutural do CSSO, depois emitir saída compacta. Os comentários são descartados, regras duplicadas fundem-se, longhands dobram para shorthands quando seguro.
4. Leia o resultado no painel Saída e use Copiar para o recolher. Limpar repõe ambos os painéis.

Se a sua entrada tem uma regra não terminada ou uma declaração partida, a barra de estado reporta o erro em vez de adivinhar.

Principais funcionalidades#

• Formatar e minificar são motores diferentes. Beautify é js-beautify; minificar é CSSO. Cada um faz o trabalho em que é bom, em vez de uma rotina comprometida a tentar fazer ambos.
• Otimização real ao minificar. O CSSO reestrutura a stylesheet — fundir .a { color: red } .b { color: red } numa regra compartilhada, colapsar margin: 0 0 0 0 para margin: 0, remover uma declaração que uma regra posterior já sobrepõe. A remoção de espaços em branco é o último passo, não o único.
• Três estilos de indentação. 2 espaços, 4 espaços ou tabulações, alternados com um menu.
• Lado a lado, pronto a copiar. Entrada editável, saída só de leitura com um botão de cópia de um clique.
• Estritamente no lado do cliente. CSSO e js-beautify estão empacotados na página e carregados apenas quando se abre esta ferramenta. A sua stylesheet é processada no navegador e nunca enviada.

Exemplo prático#

Uma pequena stylesheet em que duas regras repetem trabalho e um longhand podia ser mais curto:

Entrada:

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

Clique em Formatar com 2 espaços:

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

A repetição é agora óbvia — exatamente para o que serve um formatador. Agora clique em Minificar na mesma entrada e o CSSO reescreve-a estruturalmente:

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

Três coisas aconteceram ao mesmo tempo. O padding de quatro valores colapsou para um valor porque os quatro lados eram iguais; os quatro longhands margin-* dobraram para o shorthand margin; e as duas regras color: #ff0000 fundiram-se numa única regra com um seletor agrupado (e o hex tornou-se no red mais curto). Um simples removedor de espaços em branco teria mantido cada byte de redundância — só um otimizador reestruturante encontra estes ganhos.

FAQ#

O minificar vai mudar o aspeto da minha página?#

Não, desde que a entrada seja CSS válido. O CSSO só aplica transformações que preservam a cascata: fundir regras com declarações idênticas, dobrar longhands cujos valores são todos iguais, descartar declarações que uma regra mais específica ou posterior sobrepõe. Se uma transformação seria ambígua, é saltada. Formatar é puramente cosmético e nunca altera o significado.

O minificar mantém os meus comentários?#

Não. Os comentários são removidos durante a minificação, incluindo banners ao estilo /* !important */. Se precisa que um cabeçalho de licença ou um marcador de build sobreviva, mantenha a sua fonte comentada e reinserte o banner no seu pipeline de build depois de minificar.

Porque é que a saída minificada às vezes é maior que a minha entrada?#

Quase sempre porque a entrada já estava minificada. O CSSO ainda tem de a analisar e reemiti-la, e numa entrada já compacta e já otimizada não há nada a ganhar — a saída é essencialmente do mesmo tamanho. Alimente CSS escrito à mão ou expandido e as poupanças são reais.

O meu CSS é enviado para um servidor?#

Não. Ambos os motores correm no seu navegador. As bibliotecas são carregadas a pedido do próprio bundle da página, pelo que não há pedido de rede a transportar a sua stylesheet para lado nenhum.