O pior CSS que EU já tive que depurar chegou como uma única linha de 40.000 caracteres Uma etapa de construção havia concatenado e minificado cada parcial do projeto, uma regra perto do final estava substituindo uma cor que não deveria ter, e não havia como ver a cascata porque não havia quebras de linha para vê-la Eu enviei front-ends suficientes em temas WordPress e aplicativos React para saber que uma folha de estilo que você não consegue ler é uma folha de estilo que você não consegue corrigir, então EU construí um formatador css em Toolz.dev isso transforma aquela parede de texto de volta em CSS recortado e digitalizável numa pasta, e minifica-a novamente quando estiver pronto para enviar Este é o guia para ela e para o que o & quot; formatando CSS & quot; na verdade significa.
tl;dr: Um formatador CSS reenvia uma folha de estilo com espaçamento consistente para que seja legível, e um minificador CSS tira esse espaçamento de volta para fora para que o arquivo seja pequeno O Toolz formatador css faz ambos a partir de uma entrada Ele analisa o CSS em regras, seletores, declarações, at-regras e comentários, em seguida, imprime essa estrutura de volta com sua escolha de dois espaços, quatro espaços ou guias, ou colapsa-lo para o menor equivalente válido Aninhado
@mediae@keyframesblocos,url()valores e strings cotadas sobrevivem intactos e tudo é executado no lado do cliente para que seu CSS nunca saia do navegador.
O que é um formatador CSS?
Um formatador CSS lê uma folha de estilo e a reescreve com espaços em branco previsíveis e consistentes As regras em si não mudam Os seletores, propriedades e valores são idênticos antes e depois, e um navegador aplica o arquivo formatado exatamente como teria aplicado o original O que muda é o layout: uma declaração por linha, um único espaço após cada dois pontos, cada bloco recuado um nível mais profundo que seu pai e uma chave de fechamento em sua própria linha O resultado é um arquivo que um ser humano pode digitalizar.
Sob o capô a ferramenta não está fazendo find-and-replace no espaço em branco, que é onde formatadores ingênuos dão errado Ele analisa o CSS em sua estrutura real primeiro Uma folha de estilo é uma sequência de nós: regras de estilo que emparelham um seletor com um bloco de declarações, regras at como @media ou @import, comentários, e as declarações em si Uma vez que o CSS é uma árvore desses nós, imprimi-lo de volta para fora com qualquer indentação que você gosta é simples e, crucialmente, seguro O analisador é o que permite que o formatador saiba que uma vírgula dentro :not(a, b) faz parte de um seletor enquanto uma vírgula entre eles h1 e h2 separa dois seletores, e isso é um ponto e vírgula dentro de a url() o URI de dados não é o fim de uma declaração.
A mesma análise alimenta a operação inversa. Como a ferramenta já entende a estrutura, ela pode imprimir a árvore sem nenhum recuo, que é exatamente o que é minificar. É por isso que uma ferramenta cobre ambos os trabalhos: formatar e minificar são a mesma análise impressa de duas maneiras diferentes.
Qual é a diferença entre formatar e minificar CSS?
Estas são extremidades opostas do mesmo eixo, e saber qual você quer salva confusão A formatação, também chamada de embelezamento ou pretty-printing, adiciona espaços em branco para o benefício das pessoas A mineração remove espaços em branco para o benefício de máquinas e redes Você formata a cópia que você lê e edita; você minifica a cópia que você envia para um navegador.
A distinção importa porque eles pertencem a diferentes pontos do seu fluxo de trabalho Enquanto você está escrevendo CSS, ou quando você herdou um arquivo que você precisa entender, você quer que ele seja formatado Quando você implantar, você quer que ele seja minificado para que o navegador baixe menos bytes e pinte mais cedo A maioria dos pipelines de construção minifiquem automaticamente, mas muitas situações ficam fora de uma compilação: um trecho colado de uma CodePen, uma folha de estilo extraída de uma página que você está auditando, um arquivo de tema editado diretamente em um CMS Para aqueles, um formatador e minificador autônomo é o caminho mais rápido.
Aqui está a divisão em resumo.
| Aspecto | Formato (beutify) | reduzir |
|---|---|---|
| Audiência | Pessoas lendo e editando | Baixando navegadores |
| Espaço branco | Adicionado para legibilidade | Removido inteiramente |
| comentários | Mantido por omissão | Removido por omissão |
| Tamanho arquivo | Maior | O menor possível |
| Quando usar | Escrita, depuração, revisão | Envio para produção |
Como formato CSS com esta ferramenta?
O fluxo é deliberadamente curto Cole seu CSS na entrada, escolha embelezar ou minificar e leia o resultado Ao embelezar, escolha dois espaços, quatro espaços ou guias para combinar com as configurações do editor do seu projeto & #39; s e decida se deve manter os comentários formatador css mostra a saída com um emblema de tamanho para que você possa ver a alteração de bytes e lista quaisquer avisos de análise, como uma chave desequilibrada, como avisos, em vez de falharem silenciosamente.
As quatro etapas se parecem com isso na prática Primeiro, cole a folha de estilo, seja ela minificada, escrita à mão ou exportada de uma ferramenta Segundo, clique em Embelezar para recuperá-la ou Minificar para retirá-la Terceiro, revise a saída e o emblema de tamanho e olhe para qualquer aviso Quarto, copie o resultado para sua área de transferência ou baixe-o como um .css arquivo pronto para cair em seu projeto Não há etapa de upload e nenhuma conta, porque a coisa toda acontece em seu navegador.
Se você trabalhar com outros formatos estruturados, o mesmo padrão aparecerá no Toolz. O formatador json embeleza e minifica JSON, o formatador html faz o mesmo para marcação e o formatador sql lida com consultas A formatação é uma ideia geral, e ter a mesma forma de ferramenta para cada idioma mantém a memória muscular consistente, um tema o Kit de ferramentas para desenvolvedores web guia desenvolve-se mais.
A formatação muda o funcionamento dos meus estilos?
Não, e esta é a garantia que torna a ferramenta segura para ser executada em CSS de produção Embelezando e minificando apenas espaços em branco de toque e, opcionalmente, comentários Eles nunca reordenam declarações, nunca renomeiam nada, nunca mesclam ou soltam regras e nunca reescrevem valores A especificidade de seus seletores permanece inalterada, a ordem de origem que impulsiona a cascata permanece inalterada e o resultado computado no navegador é equivalente byte por byte.
Vale a pena afirmar isso claramente porque alguns otimizadores CSS fazem muito mais do que minificar: mesclam seletores duplicados, eliminam regras que julgam não utilizadas e reordenam propriedades. Essas transformações podem mudar o comportamento de maneiras sutis, especialmente quando a cascata ou a !important está envolvido Este formatador deliberadamente não faz nada disso É uma ferramenta de espaço em branco Se você embelezar um arquivo, não editar nada, e minificá-lo novamente, os dois arquivos são funcionalmente idênticos, o que significa que você pode ida e volta livremente sem medo.
A gramática CSS que define o que conta como espaço em branco e onde é insignificante é especificada no Módulo de sintaxe CSS nível 3 do W3 C. O formatador segue esse modelo tokenizer gramática' s, e é por isso que trata espaços em branco dentro de um token de string ou a url() diferentemente do espaço em branco entre declarações.
Como isso lida com @media, @keyframes e outras regras at?
As regras at são onde os formatadores casuais desmoronam, porque uma regra at pode terminar em ponto e vírgula ou envolver um bloco inteiro de outras regras. @import "base.css"; é uma afirmação que termina no ponto e vírgula. @media (max-width: 600px) { ... } é um bloco que contém suas próprias regras aninhadas, e essas regras aninhadas precisam ser recuadas um nível mais profundo que o @media linha em si Uma abordagem de encontrar e substituir não pode diferenciar os dois; um analisador pode.
Porque esta ferramenta constrói uma árvore real, um aninhado @media o bloco mantém suas regras internas corretamente recuadas ao embelezar e colapsadas corretamente ao minificar O mesmo vale para @supports consultas de recursos e para @keyframes animações, onde cada passo percentual como 0% e 100% é um bloco próprio dentro da animação. Declarações de fontes em @font-face e em camadas @layer as regras são tratadas da mesma maneira Qualquer que seja a profundidade de aninhamento que a folha de estilo alcance, o recuo a rastreia.
Essa consciência estrutural também protege as partes de um valor que se parecem com a sintaxe, mas não são. A url() pode conter um URI de dados embalado com base64 que inclui ponto e vírgula e dois pontos, e a content a propriedade pode conter uma string citada com chaves ou vírgulas dentro dela O formatador deixa o interior das strings citadas e url() valores exatamente como escritos, portanto, um caminho de fonte, um URI de dados SVG ou um pedaço de texto de conteúdo gerado nunca é recolhido, espaçado novamente ou quebrado. Se você incorporar imagens com frequência como URIs de dados, o imagem para base64 a ferramenta combina naturalmente com esta.
Quanto menor a minificação de CSS torna meu arquivo?
Depende inteiramente de quanto espaço em branco e quantos comentários a fonte contém, mas a economia é real Uma folha de estilo escrita com comentários generosos de indentação e documentação geralmente diminui de vinte a quarenta por cento quando esse espaço em branco desaparece Um arquivo que já era bastante compacto diminuirá menos O emblema de tamanho na ferramenta mostra a contagem exata de bytes antes e depois para o seu arquivo, para que você nunca precise adivinhar.
Esses bytes são importantes porque o CSS é um bloqueio de renderização Um navegador não pintará uma página até que tenha baixado e analisado o CSS no cabeçote do documento, portanto, cada kilobyte de folha de estilo é um kilobyte entre o usuário e sua primeira olhada na página Minificar é uma das vitórias de desempenho mais baratas disponíveis: sem alterações de código, sem risco de comportamento, apenas menos bytes no fio Em cima da minificação, a compactação gzip ou Brotli na camada do servidor encolhe o arquivo ainda mais e o CSS minificado comprime bem porque remover o recuo deixa os tokens significativos mais densos.
Minificar é primo próximo da obra o dedicado minificador css faz, e o guia minificador css vai mais fundo no lado da compressão A razão pela qual ambos existem é a conveniência: às vezes você pousa no formatador para limpar um arquivo e quer minificá-lo no mesmo lugar, e às vezes você vai direto para o minificador De qualquer forma a análise subjacente é a mesma.
Posso manter meus comentários e controlar o recuo?
Sim a ambos, e essas duas opções cobrem os casos que um formatador de tamanho único perde Os comentários são mantidos por padrão ao embelezar, porque enquanto você está lendo e editando CSS os comentários são muitas vezes a parte mais útil Ao minificar, os comentários são removidos por padrão para salvar cada byte, mas há uma alternância para preservá-los, o que você deseja quando um arquivo carrega um cabeçalho de licença ou um aviso de direitos autorais que deve sobreviver no pacote enviado.
A indentação é uma escolha porque as equipes discordam, e o objetivo de um formatador é acabar com o desacordo aplicando uma regra de forma consistente Dois espaços é o padrão mais comum em projetos front-end modernos, quatro espaços se adequam a bases de código que o usam em outros lugares, e guias se adequam às equipes que os preferem para acessibilidade ou configuração pessoal Escolha um e cada bloco na saída segue-o Consistência é todo o valor: vale a pena usar um formatador precisamente porque remove as pequenas decisões manuais que, de outra forma, desviam arquivo por arquivo através de um projeto O caso mais amplo para padronizar suas ferramentas dessa maneira é executado através do Ferramentas de produtividade do desenvolve guia.
Quais problemas cotidianos a formatação realmente resolve?
A linha de 40.000 caracteres com a qual EU abri é o caso dramático, mas os mundanos surgem com muito mais frequência Você copia uma regra de um navegador' s dev tools e ela chega com taquigrafia computada e espaçamento inconsistente que não corresponde ao seu arquivo Você herda uma folha de estilo de um empreiteiro que nunca executou um formatador, então os estilos de brace e recuo mudam a cada poucas centenas de linhas Você cola um trecho de uma postagem de blog ou uma ferramenta de design que usa guias onde seu projeto usa espaços Em cada um deles, o CSS funciona, mas não corresponde, e um arquivo que não corresponde é um arquivo que retarda cada edição futura e turva cada diff.
Executar tal arquivo através do formatador normaliza tudo de uma vez Cada bloco obtém o mesmo recuo, cada declaração pousa em sua própria linha, e o diff que você compromete depois mostra apenas as alterações que você realmente fez em vez de uma tempestade de ruído de espaço em branco Esse último ponto é a vitória silenciosa da produtividade: uma base de código formatada consistentemente produz diffs limpos, e diffs limpos tornam a revisão de código mais rápida e regressões mais fáceis de detectar A formatação não é cosmética É o que mantém uma folha de estilo legível à medida que cresce, e é por isso que todo projeto front-end sério eventualmente padroniza em um layout e o impõe Ferramentas de produtividade do desenvolve o guia apresenta um caso mais amplo para remover esse tipo de atrito manual do seu fluxo de trabalho.
É seguro formatar CSS sensível ou proprietário?
Sim, e esta é uma decisão de design deliberada em vez de uma nota de rodapé Toda a análise e formatação acontecem em JavaScript dentro do seu navegador Nenhuma folha de estilo é carregada em um servidor, nada é registrado e a ferramenta continua trabalhando com sua conexão desligada assim que a página for carregada Você pode formatar CSS que contém nomes de classes internas, tokens de sistema de design não lançados ou a estrutura de um recurso não enviado sem que nenhum deles saia da sua máquina.
Isso importa mais do que pode parecer, porque uma folha de estilo pode vazar intenção Nomes de classe e nomes de propriedade personalizada geralmente telegrafam recursos que ainda não são públicos, e a estrutura de um componente & #39; s CSS pode revelar como um produto é construído Um formatador do lado do servidor, por mais respeitável que seja, é um terceiro a quem você está entregando essa informação Uma ferramenta do lado do cliente remove a pergunta inteiramente O raciocínio por trás do processamento de dados do desenvolvedor no navegador e não em um servidor é o assunto do ferramentas online de privacidade de dados guia, e se aplica a todas as ferramentas do Ferramentas de codificação coleção, não só esta Quando a privacidade é gratuita, não há razão para desistir dela.
Perguntas frequentes
Como faço para formatar CSS online?
Cole seu CSS na área de entrada e clique em Embelezar A ferramenta analisa a folha de estilo e a reescreve com uma declaração por linha e recuo consistente Tudo é executado em seu navegador, então nada é carregado.
Qual é a diferença entre formatar e minificar CSS?
Formatação, também chamado de embelezamento, adiciona indentação e quebra de linha para que o CSS seja legível para as pessoas, enquanto a minificação remove todos os espaços em branco desnecessários e comentários para que o arquivo seja o menor possível para os navegadores Esta ferramenta faz ambos a partir da mesma entrada.
A formatação do CSS altera o funcionamento dos meus estilos?
Não. Embelezar e minificar apenas altera espaços em branco e comentários, nunca as regras, seletores ou valores. O navegador aplica uma folha de estilo formatada exatamente da mesma forma que aplica o original.
Ele lida com @media e @keyframes corretamente?
Sim. Regras aninhadas, como @media, @supports e @keyframes, são analisadas como blocos, de modo que suas regras internas são recuadas um nível mais profundamente ao embelezar e mantidas intactas ao minificar.
Ele quebrará valores de url () ou strings de conteúdo?
No. O formatador deixa o interior das strings citadas e valores de url () exatamente como escritos, de modo que os URIs de dados, caminhos de fonte e texto de conteúdo nunca são colapsados ou re-espaçados.
Quanto menor a minificação torna meu CSS?
Depende de quanto espaço em branco e quantos comentários o arquivo contém, mas uma folha de estilo legível geralmente encolhe de vinte a quarenta por cento uma vez que o recuo e os comentários são removidos O emblema de tamanho mostra a mudança exata de byte para o seu arquivo.
Posso manter meus comentários ao minificar?
Sim. existe uma alternância para preservar os comentários Deixe desligado para a menor saída, ou ligue-o quando precisar manter um cabeçalho de licença ou anotações de autoria no arquivo minificado.
É seguro formatar CSS sensível aqui?
Sim. toda a análise e formatação acontecem em JavaScript dentro do seu navegador Nenhuma folha de estilo é enviada para um servidor, nada é registrado e a ferramenta funciona com sua conexão desativada.
o formatador css é gratuito, é executado inteiramente em seu navegador, e não precisa de inscrição Embeleze uma folha de estilo para lê-lo, minify-lo para enviá-lo, e nunca depurar uma linha de 40.000 caracteres novamente Explore-o e o resto do Ferramentas de codificação em Toolz.dev.
