Code Formatting

CSS Formatter

Format, compress and pretty-print CSS code.

输入 CSS
Formatted result
格式化结果将显示在这里

What is CSS Formatter?

CSS formatter beautifies CSS code with proper indentation and structure, making stylesheets easier to read and maintain.

Features

  • Format: Beautify with indentation
  • Minify: Compress for production
  • Syntax Highlighting: Color-coded output

Use Cases

  • Stylesheet organization
  • CSS debugging
  • Production optimization

The CSS formatter rewrites a stylesheet into one declaration per line, indented by brace depth, using js-beautify with spaces only. A second pass collapses whitespace instead. Use it to read a vendored or downloaded .css file, to see what a build step really emitted, or to compare two versions of the same rule set.

What reflow does to a rule set

The editor runs the CSS beautifier from js-beautify, which walks the text token by token and tracks brace depth instead of building a CSSOM. Every rule starts on a new line, each declaration inside it gets one line at one indent level per enclosing brace, and a comma-separated selector list is split so every selector sits on its own line with no space after the comma. The semicolon closing the last declaration of a block is dropped: color:#fff} comes back as color: #fff followed by }. That is legal CSS, but the bytes changed. Comments survive in place, wrap_line_length is pinned to 0 so no line is wrapped for width, and indent_char is fixed to a single space.

Why the compact output can be longer than the input

Compression here is the same beautifier called with indent_size: 0, then two regular expressions: \s+ becomes one space, and ;\s*} becomes }. Nothing else is touched, so .a{color:red} returns as .a { color: red }; comments, the space after { and the space after : all stay. A 127-character minified file therefore grows to 143 characters, the computed ratio turns negative, and the ratio badge, rendered only when the value is positive, disappears. Because the \s+ pass covers the whole string, it also reaches inside quoted values, and runs of spaces or tabs inside a content string are flattened to one space.

What a real CSS minifier does that this pass skips

A production minifier parses declarations and rewrites tokens: #ffffff to #fff, 0px to 0, duplicate properties collapsed, shorthand merged, unused rules removed. None of that happens here, and declaration order is never rearranged. What the tool does preserve faithfully is structure, because indent comes from brace depth alone: native nesting with &, @media and @keyframes blocks are indented level by level rather than flattened, and a broken rule such as .a{color:red with no closing brace still returns without an error line. Read the result as reflowed text, not as a validated stylesheet.

Worked example

Reflowing a two-rule button snippet, then running the compact pass

Input 
.btn,.btn:focus{display:inline-block;padding:8px 16px;border:1px solid #0d6efd;color:#fff}.btn:focus{outline:2px solid #0d6efd}
Output 
.btn,
.btn:focus {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #0d6efd;
  color: #fff
}

.btn:focus {
  outline: 2px solid #0d6efd
}

The input is 127 characters on one line; the reflowed result is 154 characters over 11 lines, the extra bytes coming from indentation, the split selector list and the blank line inserted between sibling rules. The closing ; of each block is gone, and the compact pass on the same input returns 143 characters, still longer than the input because spaces after { and : are kept.

Limits and pitfalls

  • The indent selector offers only 1, 2 or 4 spaces and defaults to 2; indent_char is fixed to a space, so a tab-indented stylesheet comes back re-indented with spaces.
  • The compact pass only collapses whitespace, so a 127-character minified input returns 143 characters, and the compression ratio badge is hidden whenever the computed value is not positive.
  • The whitespace collapse also applies inside quoted values, flattening runs of spaces or tabs in a content string; keep spacing-sensitive values out of the compact pass.
  • There is no CSS parser and no validation: a missing closing brace or an unknown at-rule is reflowed without any message, because the error line only appears when the library itself throws.
  • Formatting runs synchronously in the browser on every keystroke with no input size limit, so a multi-megabyte stylesheet will stall typing in the input pane.

Related tools

When this pane is the right stop for a stylesheet, and when it is the wrong one

SituationThis page (js-beautify CSS in the browser)Real alternative
The CSS is already on a page you can open in a browserThe rules have to be pasted into the left pane by hand, so a stylesheet served from a CDN means copying it out of the network panel first.The DevTools Sources panel opens the same file and the {} pretty-print button reflows it in place, link tags included — one click whenever the rule is already live.
The file must actually get smaller before it shipsCompact is the same beautifier with indent_size: 0 plus two regular expressions, so comments survive and a space goes back in after every colon. It is a readable view, not a build step.npx csso styles.css -o styles.min.css parses the declarations and rewrites the tokens themselves, which is what makes the byte count fall; reach for it the moment the number matters.
Every file in the repo has to look identicalThree widths, spaces only, one paste at a time, and no way to express a shared config.Prettier with --parser css takes --use-tabs, any --tab-width, and wraps long value lists at --print-width (80 by default). A committed .prettierrc keeps every machine agreeing; this page keeps one paste agreeing with itself.
It is a folder of stylesheets, not a single snippetOne textarea, no file picker and no directory walk, so twenty files are twenty clipboard round trips.npx js-beautify -r "src/**/*.css" drives the identical engine over every expanded match and writes in place; the only thing that differs is the default width, 4 there against 2 here.
You need to know which rule is actually winningTwo rules matching the same element come back side by side with nothing marking the loser: there is no cascade and no specificity in a text reflow.The DevTools Styles pane strikes through overridden declarations and shows which selector took over — go there to debug a rule that will not apply, and come back here only to read the rule itself.
You want to show the reflow changed nothingOne output pane and no baseline to compare against, while the semicolon dropped at the end of every block is a real byte change.git diff -w hides the indentation, but the removed final ; still shows, so commit the reflow on its own or feed both versions to the text-diff tool before blaming your edit.

One concrete scenario

Reading a vendored grid stylesheet that arrives as one 3,350-character line

A component library ships its grid as a minified single line: 3,350 characters, 40 rules, 200 declarations. Pasted here at the default indent of 2 it comes back as 4,308 characters over 319 lines, the growth coming from two leading spaces per declaration and one space after each colon, minus the 40 semicolons that close each block. Indent 4 gives 4,708 characters on the same 319 lines — exactly 400 more, two extra spaces across 200 declarations — and indent 1 gives 4,108. So pick the width your repository already commits with, because none of the three shrinks the file below the 3,350 you pasted: if a smaller stylesheet is the goal, the indent selector is the wrong control and the file belongs in a minifier.

Frequently Asked Questions

The formatted CSS is larger — does it hurt page load?
No. Formatting is for development and debugging; ship the minified output in production. The two are lossless inverses. This tool offers both expanded and compact modes: expanded while developing, minified for build artifacts.
Why did the property order change?
If sorting is enabled, properties are grouped by category (layout → box model → typography → visuals), a maintainability convention popularized by stylelint-order. In plain formatting mode the original order is preserved.
Does it support CSS nesting (&)?
Yes. Formatting only adjusts whitespace and line breaks without interpreting properties, so native CSS nesting as well as Less and SCSS structures expand fine. Minify mode keeps nesting intact rather than flattening it.

Content reviewed: