CSS Formatting: Beautify Your Stylesheets

Why Format CSS?

CSS files accumulate messiness over time. A rushed feature adds properties without consistent indentation. A copy-paste from Stack Overflow brings a different formatting style. A minified third-party stylesheet gets manually edited. After a few months, the file is a patchwork of tabs and spaces, inconsistent brace placement, and random blank lines.

Messy CSS is harder to read, harder to debug, and harder to maintain. When properties are not aligned, spotting a duplicate declaration requires line-by-line scanning. When indentation is inconsistent, understanding nesting depth in preprocessor files becomes guesswork. When formatting varies between files, the codebase feels unprofessional.

Automated formatting fixes all of this in one pass. A formatter rewrites the CSS with consistent rules — indentation, spacing, line breaks, brace positions — producing output that looks like it was written by one careful author. The content does not change; only the presentation does.

Common Formatting Conventions

Most teams adopt one of a few standard formatting approaches:

Expanded (multi-line): Each property on its own line, indented one level inside the rule block. This is the most common format for development because it maximizes readability:

.card {
display: flex;
padding: 16px;
background-color: #ffffff;
border-radius: 8px;
}

Compact (single-line): Each rule on one line. Used occasionally for very short rule sets or utility classes where vertical space is at a premium:

.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }

Property ordering: Properties within a rule can be sorted alphabetically, grouped by type (positioning, box model, typography, visual), or left in the order they were written. Alphabetical ordering is the simplest to enforce and the easiest for new contributors to follow. Grouped ordering provides better logical coherence but requires a reference guide.

Indentation and Spacing Details

The small details of formatting have outsized impact on readability:

• Indentation: Two spaces is the most common convention in front-end development. Four spaces and tabs both have advocates. The choice matters less than consistency — pick one and enforce it across all files.
• Space after colon: Always include a space between the property name and value: color: red; not color:red;. This is nearly universal in style guides.
• Space before brace: Include a space before the opening brace: .card { not .card{. This is the dominant convention.
• Trailing semicolons: Always include a semicolon after the last property in a rule. While CSS allows omitting it, including it prevents bugs when properties are added later.
• Blank lines: One blank line between rule blocks improves visual separation. No blank lines between properties within a rule unless you are intentionally grouping them.
• Selector formatting: When a rule has multiple selectors, each selector on its own line makes diffs cleaner and selectors easier to find.

Formatting Tools and Integration

Several tools can format CSS automatically:

Prettier: The most popular code formatter, supporting CSS, SCSS, Less, and many other languages. It enforces opinionated defaults and has minimal configuration options — which is by design. Teams spend less time debating style rules because Prettier makes most decisions for them.

Stylelint: A linter that can also fix formatting issues. It is more configurable than Prettier and can enforce custom rules like property ordering, selector naming conventions, and value restrictions. Often used alongside Prettier.

Editor extensions: VS Code, WebStorm, and Sublime Text all have built-in or plugin-based CSS formatting. Format-on-save ensures every file is consistently formatted without manual intervention.

Online formatters: When you need to quickly clean up a CSS snippet — from a browser DevTools copy, a minified file, or a code review — an online tool is the fastest path. No installation, no configuration, just paste and format.

Format CSS with Our Free Tool

Our CSS Formatter takes messy, minified, or inconsistently formatted CSS and outputs clean, properly indented code. Paste your CSS, choose your indentation preference (2 spaces, 4 spaces, or tabs), and get formatted output instantly.

The formatter handles nested rules (for SCSS/Less syntax), media queries, keyframe blocks, and CSS custom properties. It normalizes spacing, aligns braces, and ensures consistent semicolon usage throughout. All processing happens in your browser — your CSS is never sent to any server.

Whether you are cleaning up a minified stylesheet, standardizing a file before a code review, or making sense of CSS copied from DevTools, the formatter gets it readable in one click.