CSS Formatter

What is CSS formatting?

CSS formatting re-prints a stylesheet with consistent layout: one declaration per line, a space after each colon, a semicolon after every declaration, and nested rules and at-rules indented. This formatter uses Prettier's CSS printer on a real CSS parser, so selectors such as a:hover, strings, url() values, and comments keep their meaning, and CSS it can't parse gets an error with the line and column instead of broken output. Minify uses PostCSS and cssnano. Both run in your browser.

How the formatter lays out CSS

Prettier parses the stylesheet with PostCSS and prints every rule the same way: the selector, then one declaration per line, each with a space after the colon and a semicolon at the end, including the last. Each selector in a comma-separated list gets its own line, and nested rules, @media, @supports, @container, @layer, and @keyframes blocks are indented by 2 or 4 spaces, as you choose.

Lines are kept within 80 characters where the CSS allows it: a long chain of selectors breaks across lines, and a value made of comma-separated parts, such as several box-shadow layers, puts each part on its own line. Comments stay where they were, and blank lines between rules are kept (several in a row become one).

What formatting changes, and what it keeps

Selectors, property values, strings, url() values, comments, and the order of rules and declarations are kept. Prettier does change how some things are spelled, in ways CSS treats as identical: hex colours, property names, and units are lowercased (#FFF becomes #fff, WIDTH: .5PX becomes width: 0.5px), numbers gain a leading zero and lose trailing zeros (.50em becomes 0.5em), and strings and attribute selector values are written in double quotes. Keywords such as Red keep their case, and custom property names keep theirs, because those are case-sensitive.

Errors with line and column

CSS that can't be parsed produces no output. Instead the formatter shows the problem and where it is, such as "Line 1, column 1: Unclosed block." for a rule that is never closed, or "Unexpected }." for an extra brace, and marks it in the editor. Go to error moves the cursor there.

Format for editing, minify for production

Readable CSS is for the people who maintain it; minified CSS is for the browser. Minify uses PostCSS and cssnano's default preset, the same engine as the CSS Minifier: it removes comments (except /*! … */ license comments) and whitespace, writes values more briefly (#ffffff as #fff, 0px as 0), and merges duplicate rules where that can't change which declaration wins. Format while you work, and minify as a build step before deploying.

Formatting and clean diffs

One declaration per line is not only easier to read; it also produces clean diffs in version control, because changing one property touches one line instead of rewriting a whole rule. Consistent formatting is what lets a reviewer see exactly which style changed.

How to format CSS

1. 1Paste your CSS. Paste a stylesheet or a single rule into the input, or load the sample.
2. 2Choose Format or Minify. Format re-indents the CSS with 2 or 4 spaces, as you choose; Minify compresses it. If the CSS can't be parsed, the error shows the line and column.
3. 3Copy the result. Copy the formatted or minified CSS into your project, or share a link to it.

Examples

.btn{color:#FFF;padding:8px 12px;border-radius:6px}

.btn {
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
}

@media (max-width:600px){a:hover{color:red}.b::before{content:"→"}}

@media (max-width: 600px) {
  a:hover {
    color: red;
  }
  .b::before {
    content: "→";
  }
}

.card{padding:24px;&:hover{color:blue}.title{font-weight:700}}

.card {
  padding: 24px;
  &:hover {
    color: blue;
  }
  .title {
    font-weight: 700;
  }
}

/* Logo */.logo{background:url(data:image/png;base64,iVBORw0KGgo=) no-repeat}

/* Logo */
.logo {
  background: url(data:image/png;base64,iVBORw0KGgo=) no-repeat;
}

.a{color:red;b{color:blue}}

.a {
    color: red;
    b {
        color: blue;
    }
}

a{WIDTH:.5PX;margin:0.50em;content:'x'}

a {
  width: 0.5px;
  margin: 0.5em;
  content: "x";
}

a{color:red

Line 1, column 1: Unclosed block.

.btn {
  color: #ffffff;
  padding: 8px;
}
.btn {
  margin: 0px;
}

.btn{color:#fff;padding:8px;margin:0}

What the formatter changes

Layout always changes; these are the other changes, all ones CSS treats as identical.

Frequently asked questions