Formatador CSS
Embeleze ou comprima CSS com um clique, com ordenacao alfabetica de propriedades. Compativel com @media, @keyframes e todas as at-rules padrao.
Esta ferramenta resolveu o seu problema?
Perguntas frequentes
O que faz o embelezamento de CSS?
O embelezamento CSS (formatacao) pega CSS comprimido ou escrito de forma inconsistente e o reformata: cada declaracao em sua propria linha, indentacao correta dentro dos blocos de regras e linhas em branco entre regras para legibilidade. E puramente cosmetico — os estilos renderizados sao identicos.
O que e ordenacao de propriedades e por que usar?
A ordenacao de propriedades reordena declaracoes alfabeticamente (A→Z) dentro de cada bloco de regras. CSS ordenado e mais facil de examinar para encontrar propriedades especificas e ajuda a evitar duplicatas. Guias de estilo como ordenacao alfabetica ajudam equipes a manter consistencia em toda a base de codigo.
A compressao CSS afeta a aparencia da pagina?
Nao. A compressao CSS remove espacos em branco, comentarios e o ultimo ponto e virgula nos blocos de regras — todos semanticamente insignificantes. Os navegadores interpretam CSS comprimido e formatado de forma identica. CSS comprimido e tipicamente 20-40% menor que CSS formatado.
Suporta consultas @media e @keyframes?
Sim. At-rules como @media, @keyframes, @supports e @font-face sao reconhecidas e seus blocos internos sao indentados corretamente. @import e @charset (que nao possuem bloco) sao formatados como instrucoes de linha unica.
Pode processar SCSS ou Less?
O formatador processa sintaxe CSS padrao e processara as porcoes CSS validas de arquivos SCSS/Less. Recursos especificos do SCSS como variaveis ($var), aninhamento e mixins (@mixin) podem nao ser formatados corretamente, pois nao sao sintaxe CSS padrao.
Como autoformatar CSS no meu projeto?
Use Prettier com uma configuracao .prettierrc, ou Stylelint com o preset stylelint-config-prettier. Para projetos Tailwind CSS, o plugin Tailwind Prettier pode ordenar classes utilitarias. O formatador CSS integrado do VS Code (Shift+Alt+F) tambem serve para formatacao local rapida.