CSS Formatter

About the CSS Formatter

Paste a stylesheet — minified, copied from DevTools, or just messy — and get one declaration per line with consistent indentation. Choose 2 or 4 spaces or tabs, braces on the same line or their own, and whether each selector of a list gets its own line. Nested SCSS and Less rules are formatted too.

Minify does the opposite for production: it removes comments, line breaks and unneeded spaces, and shows exactly how many bytes you saved. It is deliberately careful: strings, url(…) values and /*! licence */ comments are copied unchanged, and the spaces CSS needs — around + and - in calc(), in and (min-width: …) and in selectors such as a :hover — are kept.

Common uses

• Reading minified CSS from a website, a theme or a third-party widget.
• Cleaning up CSS before committing it, or before comparing two versions with a diff tool.
• Minifying a stylesheet for a static site, an email template or an embedded widget when you have no build step.
• Checking a stylesheet for unclosed braces and strings — they are reported with their line number.

What the minifier removes — and what it never touches

• Removed: comments (except /*! … */), line breaks, indentation, spaces around { } : ; ,, spaces around > + ~ in selectors, and the last ; in each block.
• Copied exactly: strings, url(…), numbers, colours, units, escapes such as .md\:flex, and !important. Inside custom properties (--gap: …) only runs of whitespace are shortened.
• Kept because CSS needs them: the spaces in calc(100% - 2rem), in and (…) and not (…), and in descendant selectors such as .a .b, a :hover and a *. A comment inside a selector is never turned into a space: .btn/**/.primary still means one element with both classes.
• It does not rewrite values (such as #ffffff → #fff) or merge rules, so the result behaves exactly like the original. As a final check the output is tokenised again and must match the original token for token.

What formatting changes

Only whitespace and line breaks. Formatting is done by js-beautify, and this page protects the places where its spacing would change what the CSS means: - Attribute selectors such as [class~="nav"] stay intact with Spaces around > + ~ on (js-beautify alone writes ~ =, which browsers reject). - A comment between two parts of a selector, as in .btn/* primary */.active, stays in place; moving it to its own line would make it a descendant selector. - // inside a custom property value, such as --api: https://example.com, is not treated as a comment. - A line break or tab before a pseudo-class (which means “any descendant”, as in .menu :hover) becomes a space instead of being removed.

SCSS and Less

The formatter understands nested rules, variables, mixins and // comments. The minifier is built for plain CSS, so compile SCSS or Less first. If it finds // comments it keeps them together with their line break — plain CSS does not support them, and removing the break would hide the next line — and tells you.

Limitations

• Formatting is done by the open-source js-beautify CSS beautifier. It changes whitespace only and does not validate CSS; unclosed braces, strings and comments are reported as warnings.
• Minify makes no structural optimisations such as merging duplicate rules, shortening colours or removing unused selectors. Free build tools such as cssnano or Lightning CSS can do that.
• Large stylesheets are processed in a background thread so the page stays responsive; on older phones a file of several megabytes can take a few seconds.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.