CSS Pretty Print: Prettier Style for Stylesheets

CSS pretty print as a shared house style

On this page, CSS pretty print means running your stylesheet through Prettier, the same opinionated formatter many teams already run on their JavaScript. Instead of re-indenting whatever it receives, Prettier parses the CSS and prints every rule with the same small decisions about case, zeros, quotes and semicolons. Two people who write the same rules in different styles end up with the same file, which keeps pull requests focused on what actually changed.

If you only want to read a minified stylesheet with every value left exactly as written, control blank lines between rules, or compress the result again, the CSS Formatter is the better fit. It uses js-beautify, changes whitespace only, and has a Minify button.

One stylesheet, two engines

This input was run through both pages with their default settings:

.btn,.btn-primary{PADDING:.5rem 1rem;color:#FFF;background:#0F766E;box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.15)}
@media (min-width:768px){.btn{padding:.75rem 1.5rem}}

CSS Pretty Print (Prettier):

.btn,
.btn-primary {
  padding: 0.5rem 1rem;
  color: #fff;
  background: #0f766e;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
@media (min-width: 768px) {
  .btn {
    padding: 0.75rem 1.5rem;
  }
}

CSS Formatter (js-beautify):

.btn,
.btn-primary {
  PADDING: .5rem 1rem;
  color: #FFF;
  background: #0F766E;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .15)
}

@media (min-width:768px) {
  .btn {
    padding: .75rem 1.5rem
  }
}

Differences you can see in the output:

• Property names are lowercased (PADDING becomes padding), and so are hex colours. Keyword values such as RED keep their case.
• Decimals get a leading zero: .5rem becomes 0.5rem, .2 inside rgba() becomes 0.2.
• Every declaration ends with a semicolon, including the last one in a block.
• The two box-shadow layers go on separate lines, and the media query gains a space after the colon.
• No blank line is inserted between rules; the beautifier adds one by default.

Quotes are normalised too. @import 'reset.css'; and content:'\201C' come out with double quotes here, while the beautifier keeps single quotes.

What the two controls change

The page exposes Indent (2, 3, 4 or 8 spaces, or a tab) and Line width (20–320, default 80). Everything else is fixed at Prettier's defaults.

Line width matters less in CSS than in JavaScript, but it does decide when function arguments and long selectors wrap. At 80 columns grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); stays on one line; at 40 it becomes:

  grid-template-columns: repeat(
    auto-fill,
    minmax(200px, 1fr)
  );

Some wrapping does not depend on the width at all. A comma-separated list whose items contain spaces, such as a transition with two parts, is always printed one item per line, while a simple list stays inline:

.card {
  transition:
    color 0.2s,
    opacity 0.2s;
  font-family: Arial, sans-serif;
}

Strings are always printed with double quotes on this page, because Prettier's singleQuote option, which applies to CSS as well as JavaScript, is not exposed here.

Matching the output in your repository

The settings used here translate directly into a .prettierrc file at the project root. If your team prefers single quotes in CSS, set singleQuote to true and expect that one difference from this page:

{
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false
}

Install Prettier as a pinned development dependency with npm install --save-dev --exact prettier, format the existing styles once with npx prettier "src/**/*.css" --write, and add npx prettier "src/**/*.css" --check to your CI pipeline. An editor with Prettier support can then format on save using the same file.

For a rule you aligned by hand, such as a grid template, a /* prettier-ignore */ comment leaves the next rule untouched and everything after it is handled as usual. This is real output from the tool:

/* prettier-ignore */
.grid{grid-template-areas:"a b" "c d"}
.x {
  color: RED;
  margin: 0px;
}

The ignored rule is printed verbatim, and the second rule is formatted normally. As the example shows, Prettier fixes layout, not mistakes: 0px and the uppercase keyword are left for a linter to flag.

Picking the right CSS page

• Plain CSS for a Prettier-formatted codebase: this page.
• Readable output with values untouched, or a quick minify: the CSS Formatter.
• Mixins, variables or other preprocessor syntax: the SCSS Formatter or the LESS Formatter.
• Checking for invalid properties and values: the CSS Validator.

Formatting runs locally in your browser; the stylesheet is never sent to a server.