CSS Formatter & Minifier

CSS (Cascading Style Sheets) styles every web page, and its syntax is comparatively simple compared to a full programming language: a stylesheet is a sequence of rules, each rule is a selector followed by a block of semicolon-separated declarations in curly braces, and declarations are property:value pairs. That regularity — braces open and close blocks, semicolons end declarations — is exactly what makes it practical to format or minify with a straightforward tokenizer rather than a full parser, and this tool does exactly that: it walks the CSS text character by character, tracking brace depth and recognising selectors, declarations, comments and at-rules (@media, @font-face, @keyframes, and so on). Formatting exists because CSS is very often edited by hand and readability matters for maintenance: a stylesheet with everything crammed onto one line is nearly impossible to scan or diff in version control, while one declaration per line with consistent indentation makes it obvious at a glance which properties apply to which selector, and makes changes show up as small, readable diffs. Minifying exists for the opposite reason: in production, whitespace and comments add bytes to every page load with zero effect on rendering, so stripping them (and normalizing details like removing the space after a colon, or the trailing semicolon before a closing brace) reduces file size and, at scale, improves page load time — this is one of the most common web performance optimisations and is why virtually every production build pipeline includes a CSS minification step. Because the tokenizer tracks nesting depth via braces, it correctly handles at-rules that themselves contain nested rule blocks, such as @media queries wrapping multiple selectors, or @keyframes with percentage-based steps (0% { ... } 50% { ... } 100% { ... }) — each nested block is indented one level deeper than its containing at-rule. It also understands CSS comments (/* ... */) and strips them during minification while preserving them (on their own line) during formatting, and it treats content inside quoted strings (e.g. content: "a; b" or a url() with special characters) as opaque text rather than syntax, so semicolons or braces that happen to appear inside a quoted string do not confuse the brace/semicolon counting. What this tool does not do is validate that your CSS is semantically correct — it will happily format a stylesheet that uses a property name that does not exist, or a color value that is not valid, because that is a question of CSS semantics, not syntax structure, and checking it would require a full property/value grammar for every current and historical CSS property. It also treats modern CSS nesting syntax (native CSS nesting, where a selector can be written inside another selector's block without needing a preprocessor) the same way it treats any other nested block, since structurally it is just another set of braces — but it does not resolve or expand what the nested selector would compile to, it simply formats the nesting as written. For CSS-specific linting (catching invalid properties, duplicate declarations, or accessibility issues like insufficient color contrast), a dedicated tool such as Stylelint is the right choice; this tool's job is purely making CSS readable or compact, not validating what it says.