CSS Beautifier and Minifier

Beautify or minify CSS, SCSS and Less, and sort properties A to Z without breaking shorthand overrides. Values are never rewritten and nothing leaves your browser.

The interactive tool loads here when JavaScript runs.

About this tool

What is the CSS Beautifier and Minifier?

This CSS beautifier turns a minified or untidy stylesheet into one declaration per line with consistent indentation, and the minifier does the reverse, removing comments and every space CSS ignores. It understands plain CSS, SCSS and Less, including nested rules, &:hover selectors, #{interpolation}, $variables, @include and // line comments.

Tick Sort properties to put declarations in alphabetical order inside each rule. Alphabetical order makes diffs quieter and duplicate properties easy to spot, but a naive sort can change how a page looks: border: 0 after border-top: 4px solid red removes the red line, and swapping them brings it back. The sort here knows which properties override each other and keeps those pairs in their original order while sorting everything else.

Formatting runs in your browser. The stylesheet is never uploaded, and the output is checked against the input after whitespace is stripped from both, so you are warned if anything else changed.

  • Beautify, minify and alphabetical sort for CSS, SCSS and Less
  • Cascade-safe sort that keeps shorthand and longhand overrides in order
  • Vendor-prefixed properties placed next to the standard one
  • Values, strings and url() left exactly as written
  • Optional licence comment preservation
  • Clear errors for unbalanced braces and unterminated strings
  • Runs locally in the browser
Read the guide: CSS Formatting, Minification and Property Order: What Is Safe

How to use the CSS Beautifier and Minifier

  1. Paste your stylesheet, or start from the sample.
  2. Choose CSS, SCSS or Less. SCSS and Less also accept // comments and nesting.
  3. Choose Beautify or Minify, and tick Sort properties if you want alphabetical declarations.
  4. For Beautify, set the indent and whether each selector in a comma list gets its own line and whether rules are separated by a blank line.
  5. Copy or download the result. The chips show the size before and after and, when sorting, how many declarations moved.

Worked examples

Sorting without losing an override

Input

.btn{padding:8px 16px;border:1px solid #ccc;border-top:0;color:#fff;background:#dc2626}

Output

.btn {
  background: #dc2626;
  border: 1px solid #ccc;
  border-top: 0;
  color: #fff;
  padding: 8px 16px;
}

border stays above border-top, so the button still has no top border. A plain alphabetical sort happens to keep this order, but border-top before border (in the input) would also be kept.

Minifying a selector list

Input

/* nav */
.nav a:hover , .nav a:focus { color : #dc2626 ; text-decoration : underline }

Output

.nav a:hover,.nav a:focus{color:#dc2626;text-decoration:underline}

The comment and spaces around commas, colons and braces go, but the descendant space between .nav and a stays because it is a combinator.

Spaces that must stay

Input

.a :hover { width: calc( 100% - 2px ) }

Output

.a :hover{width:calc(100% - 2px)}

The space in ".a :hover" means "any hovered descendant of .a", and calc() requires spaces around + and -. Both survive minification.

Background and insight

Inside one rule, when the same property is set twice the later declaration wins. Shorthand properties make this subtle because a shorthand sets every longhand it covers, including ones you did not mention: font resets line-height, border resets border-image, background resets background-size, and inset sets top, right, bottom and left. Any reordering tool therefore has to treat a shorthand and its longhands as dependent. This one uses the property name structure (border covers border-top and border-top-color, margin covers margin-inline-start) plus a list of shorthands whose longhands have other names, such as font and line-height, gap and row-gap, flex-flow and flex-wrap, place-items and align-items.

Vendor-prefixed copies such as -webkit-transition are sorted next to the standard property, before it, which is the order autoprefixer produces. Custom properties (--brand), SCSS $variables, @include and @extend lines and nested rules act as fixed points: declarations are only reordered between them, because moving a declaration past an @include can change which value wins.

Many minifiers go further than whitespace: they shorten #ffffff to #fff, drop units from zero values and merge rules. Those rewrites cause real bugs. calc(0px + 5%) becomes invalid as calc(0 + 5%), and a unitless zero inside a custom property can break the calc() that uses it later. This minifier only removes comments, whitespace, the last semicolon in a block and empty rules, which is where most of the savings are anyway, and it leaves every value exactly as written.

Common use cases

  • Reading a site's CSS

    Unminify a production stylesheet from developer tools to see how a component is built.

  • Tidying legacy stylesheets

    Bring years of mixed indentation and one-line rules into a consistent shape before refactoring.

  • Cleaner code reviews

    Sort declarations once so future diffs show real changes instead of reshuffled lines.

  • Inline critical CSS

    Minify the above-the-fold styles you paste into a style tag in the page head.

  • Email and CMS templates

    Shrink CSS for an HTML email or a CMS field that has a character limit, without a build tool.

Tips and limitations

  • If you use Stylelint, its order plugins can enforce the same alphabetical order on every commit after you sort once here.
  • Some teams prefer grouping by type (position, box model, typography) over alphabetical order. This tool only does alphabetical; groups are a team convention that a tool cannot infer.
  • The minifier keeps /*! comments by default because licences such as MIT require the notice in distributed copies.
  • Sass maps and functions such as map-get($m, key) format fine; Less guards and detached rulesets also pass through, but very unusual preprocessor syntax may come out on one line.
  • For production bundles, a build-time minifier such as Lightning CSS or cssnano can also merge duplicate rules. Check its output in the browsers you support.

Frequently asked questions

Does the order of CSS properties matter?

Only when two declarations in a rule set the same property, directly or through a shorthand. Then the later one wins. Properties that do not overlap, such as color and padding, can be in any order with the same result.

Is alphabetical CSS sorting safe?

A naive alphabetical sort is not, because it can move a longhand like border-top above the border shorthand that would have reset it. This tool detects shorthand and longhand pairs and keeps their original order, so the computed styles stay the same.

Can it format SCSS and Less?

Yes. Choose SCSS or Less to allow // comments, nesting, &-selectors, #{interpolation}, $ or @ variables and mixins. Sorting treats variables, @include and nested rules as fixed points.

How much smaller does minified CSS get?

Typically 15 to 30% for hand-written CSS, more if it has many comments. The chips under the output show the exact before and after size in bytes.

Why does the minifier not shorten colours or remove units?

Those rewrites save a few bytes after gzip and are where minifiers introduce bugs, for example calc(0px + 5%) becoming the invalid calc(0 + 5%). Leaving values untouched means the minified file behaves exactly like the original.

Does it remove empty rules?

In minify mode, yes: a rule with no declarations, such as .unused {}, is dropped. Empty @media or @font-face blocks are kept. Beautify mode keeps everything.

Is there an in-depth guide to the CSS Beautifier and Minifier?

Yes. “CSS Formatting, Minification and Property Order: What Is Safe” covers the background, how it works, common pitfalls and worked examples. Read the full guide.

People also search for

  • sort css properties alphabetically online
  • unminify css from a website
  • scss formatter with nested rules
  • does css property order matter
  • minify css without breaking calc
  • format less stylesheet online
  • shorthand and longhand css order
  • remove comments from css file

Related Tools You May Like

Free, in-browser tools that pair well with this one.