~/frontend-tools/css-formatter
CSS Formatter and Beautifier
Make CSS readable again. Paste minified or messy CSS and get one declaration per line, consistent spacing after colons, properly indented @media and other nested blocks, and blank lines between rules. Choose 2 spaces, 4 spaces or tabs.
Using the CSS Formatter & Beautifier
Why format CSS
Minified CSS is fast to download and impossible to read. When you need to debug a third-party stylesheet, review a pull request or learn from someone else's styles, formatting puts each declaration on its own line so you can scan it.
What the formatter changes
It only changes whitespace: line breaks, indentation and the spaces around colons, braces and commas in selector lists. Values, strings, comments and the order of rules are kept exactly, so the formatted CSS behaves identically to the input.
Nested blocks
@media, @supports, @container, @layer and keyframes get an extra level of indentation for their contents, which makes the structure of responsive stylesheets clear at a glance. Native CSS nesting is indented the same way.
Spaces or tabs
There is no right answer, only consistency. Two spaces is the most common choice in web projects; match whatever your team or editor already uses.
Formatting in your editor
Most code editors can format CSS on save with an extension such as Prettier, which keeps a whole team's files consistent automatically. Use this tool when you are outside your editor: reading CSS copied from browser developer tools, a CMS, an email or a third-party library.
Frequently asked questions
Can the formatter fix broken CSS?
No. It formats what it is given. Missing braces may produce odd indentation, which is often a helpful clue to where the error is.
Will it sort my properties?
No. Property order can matter for overrides and shorthands, so it is left alone.
Is there a minifier?
Yes, the CSS minifier does the reverse.