How should CSS be formatted?

Put each declaration on its own line, indent inside every block, add a space after the colon, put each selector of a list on its own line and leave a blank line between rules.

Should I use 2 spaces, 4 spaces or tabs?

Any of them is fine. Two spaces is the most common choice. What matters is that the whole project uses the same one.

What is the difference between formatting and minifying CSS?

Formatting makes code easier for people to read. Minifying makes it smaller for the browser by removing whitespace and comments.

Which tools format CSS automatically?

Prettier formats it, Stylelint checks and fixes style rules, and most code editors have a format on save option.

CSS Formatting Guide: Style, Indentation, Minifying and Linting

How to lay out CSS so it is easy to read, easy to review and easy to keep consistent, and when to format, minify or lint.

Want it done for you? Paste your code in the CSS formatter.

Formatting, minifying and linting

Job	What it does	When
Formatting	Changes the layout: indents, line breaks, spaces	While you write and before you commit
Minifying	Removes what the browser does not need	When you publish
Linting	Finds mistakes and breaks of your rules	While you write and in review

A layout that most teams use

.card {
  display: flex;
  padding: 1rem 1.5rem;
  border: 1px solid #ddd;
}

.card:hover,
.card:focus-within {
  border-color: #2b5cb8;
}

One declaration per line, and a semicolon after every declaration, including the last.
A space after the colon, and a space before the opening brace.
One selector per line in a list, so a diff shows exactly which selector changed.
A blank line between rules, and no blank lines inside a rule.
Indentation inside every block, including media queries. Two spaces is the most common, and four or a tab are fine if you use them everywhere.

Order of properties

There is no required order, and the browser does not care. Pick one rule and keep it: alphabetical, or grouped by purpose (layout, box, typography, color, effects). Alphabetical order is easy to automate, but be careful: a shorthand such as margin must stay before its longhands such as margin-top, or it will overwrite them. That is why the formatter does not sort by default.

Comments

Use comments to explain why, and not what the line already says.
Use a short heading comment to mark big sections of a long file.
Use /*! to mark license comments that a minifier should keep.

Values

Choose lowercase or uppercase hex colors, and use the same in every file.
Write 0 without a unit, or always with one. A unitless zero is valid for lengths.
Put long comma lists, such as transitions and shadows, on one value per line.
Write a leading zero (0.5) or never write it (.5), and stay with the choice.

Automate it

In your editor: most editors have a format command, such as Shift+Alt+F in Visual Studio Code on Windows. Format on save keeps files tidy without effort.
Prettier formats CSS from the command line: npx prettier --write "**/*.css".
Stylelint checks for mistakes and style rules: npx stylelint "**/*.css", and many rules can be fixed with --fix.
An EditorConfig file keeps indentation the same in every editor on a team.
Minifiers such as clean-css, cssnano and Lightning CSS can run in your build: npx clean-css-cli -o style.min.css style.css.

Common problems

Everything after one rule is ignored. A missing closing brace or semicolon is the usual cause. The formatter points out unbalanced braces.
The format looks wrong in SCSS or Less. Those are not plain CSS, so use a formatter made for them.
Minified file is hard to read. Run it through the CSS beautifier.

Tools on this site

CSS formatter and CSS beautifier to lay out code.
CSS minifier, CSS compressor and the CSS minification guide to make it smaller.
CSS pretty print to read it with line numbers and colors.
px to rem converter and CSS clamp calculator for values.

CSS Formatting Guide