CSS Formatter

The CSS Formatter transforms messy, minified, or inconsistently-formatted CSS into clean, properly-indented output. Works with plain CSS, SCSS (Sass), LESS, and Stylus. Configurable formatting rules: indentation (2 or 4 spaces, tab), space inside braces, newline before opening brace (K&R vs Allman), one selector per line vs comma-joined, space around colons. Preserves comments and the original order of declarations. Perfect for cleaning up CSS from minified production builds, normalizing team code styles, or preparing CSS examples for documentation.

CSS is notoriously prone to inconsistent formatting. Different editors, different team members, and different preprocessors produce different styles. A well-formatted CSS file is dramatically easier to scan, review, and maintain — properties aligned, nested selectors indented, comments preserved. This formatter handles the mess in seconds. Complements our CSS Minifier (opposite direction) for production builds.

CSS formatting conventions (widely adopted):

Indentation:
- 2 or 4 spaces (most common), or tab.
- Consistent throughout file.

Braces:
- K&R / one-line style: .selector { (opening brace same line)
- Allman: .selector\n{ (opening brace new line) — rare in CSS

Declaration format:
``css
.selector {
property: value;
property: value;
}
``

- One declaration per line.
- Space after :.
- Semicolon after value (including last — makes diff-friendly).
- Consistent indentation.

Selector formatting:
- One selector per line when comma-separated:
``css
.button,
.btn,
[type="submit"] {
/* ... */
}
``

Grouping and comments:
- Separate logical sections with blank lines.
- /* Section comment */ at section starts.
- Inline /* trailing comment */ where needed.

Property ordering conventions:

Different projects use different rules:
- Alphabetical — easy to scan, harder to group related.
- SMACSS / Logical — position/display/box/text grouped.
- Concentric — outside-in (positioning → margin → padding → content).
- Random — do not do this.

Shorthand expansion:
Some formatters expand shorthands for clarity:

```css
/* Input */
margin: 10px 20px;

/* Expanded */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
```

Rarely wanted — shorthand is more concise. This formatter preserves your chosen syntax.

SCSS-specific:
- Nested rules: indent properly.
- Variables ($) at top.
- @include, @extend lines.
- & parent selector reference.

LESS-specific:
Similar nesting, with @ variables.

Common issues handled:

- Missing semicolons (added).
- Extra semicolons (removed).
- Unclosed braces (detected).
- Inconsistent spacing (normalized).
- Comments position (preserved).

What it does NOT do:

- Change property ordering (alphabetize, etc.) — preserves author intent.
- Remove unused rules (use PurgeCSS, UnCSS).
- Combine duplicate selectors (use CSSnano, CleanCSS).
- Add missing vendor prefixes (use Autoprefixer).
- Lint CSS (use Stylelint).

CSS Formatter vs CSS Minifier: Formatter expands for readability. Minifier compresses for production. Opposite operations; lossless roundtrip. See our CSS Minifier.

This tool vs Prettier: Prettier is the industry-standard code formatter (JS, CSS, HTML, more). Runs in editor/CI. More opinionated; harder to configure. This tool is browser-based for ad-hoc formatting without installation. Both produce clean output.

Formatter vs Linter (Stylelint): Formatter fixes cosmetic issues (spacing, indentation). Linter fixes semantic issues (unknown properties, duplicate selectors, bad patterns). Use both.

CSS vs SCSS formatting: Same basic rules. SCSS has additional nesting and preprocessor features. This tool handles both.

Auto-format on save vs tool: Editor auto-format (Prettier integration) is best for daily work. This tool for one-off formatting, code from different sources, quick checks without editor.

Ordering plugin vs formatter: Stylelint with stylelint-order plugin orders properties (alphabetical, logical). Formatter preserves order. Use ordering when you want enforced consistency.