Beautify CSS — Format and Pretty-Print Stylesheets

How CSS Beautification Works

CSS beautification restores readable formatting to compressed or minified stylesheets. It parses the CSS and re-prints it with consistent indentation, one declaration per line, and proper spacing around selectors and values.

Before and After

/* Minified input */
.nav{display:flex;gap:8px}.nav a{color:#333;text-decoration:none}.nav a:hover{color:#0066cc;text-decoration:underline}

/* Beautified output */
.nav {
  display: flex;
  gap: 8px;
}

.nav a {
  color: #333;
  text-decoration: none;
}

.nav a:hover {
  color: #0066cc;
  text-decoration: underline;
}

Formatting Options

Most CSS beautifiers support configurable options:

• Indent size — 2 spaces, 4 spaces, or tabs
• Brace placement — Opening brace on the same line as the selector (most common) or on a new line
• Selector formatting — Each selector in a group on its own line (.a,\n.b) or all on one line
• Declaration ordering — Alphabetical, grouped by type (positioning, box model, typography), or unchanged
• Blank lines — Insert blank lines between rule blocks for readability
• Quote normalization — Standardize single or double quotes in string values

When You Cannot Fully Restore

Like JavaScript beautification, CSS formatting cannot recover:

• Removed comments — Documentation is permanently lost after minification.
• Removed shorthand expansions — If margin: 10px was originally written as four separate margin-* declarations, the beautifier has no way to know.
• Merged selectors — If two rules were combined during minification, the beautifier keeps them combined.

Tools for CSS Beautification

• Prettier — Opinionated formatter that handles CSS, SCSS, and Less.
• Stylelint with --fix — Linter that can also auto-format.
• css-beautify (part of js-beautify) — Standalone CSS formatter.
• VS Code built-in formatter — Uses a basic CSS parser for formatting.

Beautification as a Debugging Aid

When you encounter a minified stylesheet causing layout issues, beautifying it first makes it dramatically easier to locate the problematic rule. Add the beautified version to your browser DevTools sources for step-through debugging.