CSS Formatter
Beautify or minify CSS with optional property sorting. Supports @media queries, @keyframes and all standard at-rules.
Did this tool solve your problem?
Frequently Asked Questions
What does CSS beautification do?
CSS beautification (formatting) takes minified or inconsistently-written CSS and reformats it: each declaration on its own line, proper indentation inside rule blocks, and blank lines between rules for readability. It's purely cosmetic — the rendered styles are identical.
What is property sorting and why use it?
Property sorting reorders declarations alphabetically (A→Z) within each rule block. Sorted CSS is easier to scan for specific properties and helps avoid duplicates. Popular style guides like concentric CSS or alphabetical ordering help teams stay consistent across codebases.
Does CSS minification affect page appearance?
No. CSS minification removes whitespace, comments, and the last semicolon in rule blocks — all of which are semantically insignificant. Browsers parse minified and formatted CSS identically. Minified CSS is typically 20–40% smaller than formatted CSS.
Does it support @media queries and @keyframes?
Yes. At-rules like @media, @keyframes, @supports, and @font-face are recognized and their inner blocks are indented properly. @import and @charset (which have no block) are formatted as single-line statements.
Can it handle SCSS or Less?
The formatter handles standard CSS syntax and will process valid CSS portions of SCSS/Less files. SCSS-specific features like variables ($var), nesting, and mixins (@mixin) may not be formatted correctly since they're non-standard CSS syntax.
How do I autoformat CSS in my project?
Use Prettier with a .prettierrc config, or Stylelint with the stylelint-config-prettier preset. For Tailwind CSS projects, the Tailwind Prettier plugin can sort utility classes. VS Code's built-in CSS formatter (Shift+Alt+F) also works for quick local formatting.