CSS Formatter

What is a CSS formatter?

This one runs entirely in your Blazor circuit rather than calling out to an API — a character-by-character scan tracks brace depth, breaking a new line after every {, }, and ; and indenting based on nesting level. It's a custom scanner, not a CSS parser or a library like ExCSS, so it has no concept of selectors, properties, or values — only braces and semicolons.

One real consequence: before the brace-scanning pass runs, all runs of spaces and tabs in the input get collapsed to a single space, with no exception for quoted strings. If your CSS has a content declaration or a font name with deliberately repeated spaces inside the quotes, those extra spaces get silently collapsed to one. For everything except quoted string values with intentional multi-space content, this is invisible — but it's worth knowing if a formatted stylesheet's quoted text looks subtly different from what you pasted in.

How CSS gets hard to read

CSS ends up in a state that needs formatting for several reasons. Production stylesheets are minified by build tools to remove all whitespace. Browser DevTools displays computed or overridden styles in a compact format that does not preserve the original structure. Third-party libraries and frameworks ship minified CSS. Auto-generated CSS from design tools like Figma, CSS preprocessors, or utility frameworks like Tailwind can be verbose and inconsistently structured. In each case, formatting restores readability instantly.

CSS specificity and the cascade

When reading or debugging CSS, understanding specificity helps you know which rule applies when multiple rules target the same element. Specificity is calculated as a three-part score (ID, class, element):

• Inline styles — highest specificity, override everything else
• ID selectors (#header) — one ID point
• Class selectors, attribute selectors, pseudo-classes (.btn, [type="text"], :hover) — one class point each
• Element selectors and pseudo-elements (div, ::before) — one element point each

When two rules have equal specificity, the one that appears later in the stylesheet wins. Formatting CSS makes specificity relationships visible by showing each rule clearly, which helps diagnose why a style is being overridden unexpectedly.

How to use this tool

1. Paste your CSS — minified, copied from DevTools, or just inconsistently formatted — into the editor.
2. Click Format.
3. Review the clean, indented output on the right.
4. Copy it back to your project or stylesheet.

How the formatter handles @media and nested at-rules

Since the scanner only tracks brace depth, @media, @keyframes, @supports, and other at-rules that contain braces format correctly by default — the nested braces just add depth, and each rule's closing brace reduces it. A @media block with several rule sets inside comes back as cleanly as a flat stylesheet, with the contained rules indented one level deeper than the @media declaration itself. Custom properties (--my-color: hsl(...)) also pass through without issues since the colon in a CSS variable declaration is just another character in a property value, and the scanner only makes decisions on {, }, and ;.

One edge case: unclosed CSS comments

Block comments (/* ... */) are handled by scanning for the closing */ from the opening /*. If that closing marker doesn't exist — an unclosed comment — the formatter treats everything from the comment start to near the end of the entire input as a single giant comment string and places it on its own line. No error is shown; the output simply looks like one large commented-out block containing most of your stylesheet. If a formatted stylesheet comes back looking mostly empty with a huge indented block, check whether the input has an unclosed /*.

Formatter vs Minifier

This tool is the direct counterpart of the CSS Minifier. Use the formatter when you need to read, understand, or edit a stylesheet — particularly one that was minified for production. Use the minifier when you need to produce lean output for deployment. In a well-structured project, you keep readable source CSS in version control and run minification automatically as a build step using tools like PostCSS, webpack, or Vite.