What a CSS formatter does
A formatter rewrites the layout of your stylesheet, and leaves its meaning alone. It puts each declaration on its own line, indents the rules inside media queries, adds a consistent space after colons and before braces, and separates rules with blank lines. The browser sees the same CSS, and you can read it.
Before and after
a{color:red;background:#FFF}.nav>li{margin:0 auto}@media(min-width:600px){.nav>li{margin:0}}
a {
color: red;
background: #FFF;
}
.nav > li {
margin: 0 auto;
}
@media (min-width: 600px) {
.nav > li {
margin: 0;
}
}
Options
- Indent: 2 spaces, 4 spaces or a tab.
- Brace style: the opening brace on the same line as the selector, or on its own line.
- One selector per line: a list such as h1, h2, h3 is split over several lines, which gives cleaner version control diffs.
- Blank line between rules and keep the last semicolon, so adding a declaration later changes only one line.
- Hex colors: keep them, or change them all to lowercase or uppercase. Lowercase property names are available too.
- Sort properties A to Z. This is off by default, because sorting can change the result when a shorthand such as margin comes after a longhand such as margin-top.
- Remove comments and remove empty rules, for a cleaner file.
- Break long comma lists such as transition or box-shadow onto one value per line.
What it understands
The formatter reads CSS with a proper parser and not with find and replace. Strings, comments, url() values with semicolons (such as data URIs) and nested parentheses are left intact. Media queries, @supports, @font-face, @keyframes, @layer, @container and the newer nested CSS rules are laid out correctly. If a brace is missing or extra, the tool tells you.
It reads plain CSS. SCSS and Less features, such as // comments, variables with $ or @, and mixins, are not CSS and may not format well.
Related tools
Turn compressed CSS back into readable code with the CSS beautifier, make a file smaller with the CSS minifier or the CSS compressor, or read it with line numbers and colors in the CSS pretty print view. The CSS formatting guide covers style conventions. You may also need the HTML formatter, the JavaScript formatter, the px to rem converter or the CSS clamp calculator.