What formatting does
The formatter puts each declaration on its own line, indents it inside its rule, and puts the closing brace on its own line. Selectors separated by commas go on separate lines by default, and rules are separated by a blank line. At-rules such as @media indent the rules inside them.
It changes layout only. Colors like #FFF stay #FFF, 0.5 stays 0.5, and the order of rules and declarations is never changed, because order decides which rule wins. It does not add a missing semicolon or fix a typo. After formatting, the result is compared with your input, and a note appears if anything other than white space differs.
Format or minify?
Format a stylesheet to read it, review it, or find a rule in minified CSS you copied from a page. Minify when you ship the file and bytes matter. Keep the formatted file as your source and minify at build time. The CSS minifier page explains exactly what is removed.
SCSS and Less
The formatter handles the common parts of SCSS and Less: nested rules, the & parent selector, $variables, @include, and // line comments. It lays them out like CSS. It does not compile anything and it does not understand every feature, so check the result for files that use advanced features such as maps, functions or loops.
Minify mode is for plain CSS only. SCSS and Less need to be compiled to CSS first.
Problems it reports
Browsers repair many CSS mistakes silently, which hides them. The formatter looks for the ones that usually mean something was lost:
- A comment that is never closed, which swallows everything after it.
- A string that is not closed before the end of the line.
- A
{,(or[that is never closed, reported where it was opened. - An extra closing bracket with nothing open.
These appear as notes under the result with their line and column. The CSS is still formatted. Whether a property name or value is valid is not checked.