CSS Formatter & Beautifier

Why formatting your CSS matters

Browsers don't care how your CSS looks. People do. A stylesheet that was minified for production, exported from a page builder, or edited by five people over three years ends up with rules crammed onto single lines, inconsistent indentation and selectors you can't scan. Formatting puts every declaration on its own line at a predictable depth, so you can see what a rule does at a glance, review changes in a pull request, and spot the duplicate margin that's been fighting you all afternoon.

What this formatter does

• Indents every block, including rules nested inside @media, @supports and @layer.
• One declaration per line with a consistent property: value; shape, and adds the final semicolon that's easy to forget.
• Splits selector lists so h1, h2, h3 becomes one selector per line, which keeps diffs clean.
• Normalizes spacing around combinators like > and +, after commas, and before !important.
• Leaves strings, url() values and custom properties alone, because changing those can break things.

Un-minifying production CSS

Inspecting a competitor's site, debugging a theme, or recovering styles when the source files are gone? Paste the minified file and you get readable rules back. It's the reverse of our HTML, CSS and JS minifier, and you'll usually want both: format while you work, minify when you ship.

/* before */
.btn,.btn-primary{padding:8px 16px;background:#1D4ED8;color:#FFF}@media (max-width:600px){.btn{width:100%}}

/* after */
.btn,
.btn-primary {
  padding: 8px 16px;
  background: #1d4ed8;
  color: #fff;
}

@media (max-width: 600px) {
  .btn {
    width: 100%;
  }
}

Should you sort properties?

Alphabetical sorting makes long rules easy to scan and ends arguments about where a new property goes. The one thing to watch is shorthand order: if a rule sets margin-top and then margin, the shorthand wins, and sorting can flip that. Custom properties (--brand) are kept at the top of each rule so your tokens stay visible.

HTML and JavaScript too

Switch to HTML to indent nested elements, keep short ones like <li> on a single line, and format any <style> and <script> blocks inside the page. <pre> and <textarea> content is left untouched. JavaScript formatting handles strings, template literals and regular expressions correctly and is great for reading third-party snippets. For a whole codebase, a project formatter like Prettier wired into your editor is still the best long-term setup.

Cleaning up a theme's colors while you're at it? Run your palette through the contrast checker.

Frequently asked questions