CSS Formatter & Minifier

CSS formatter and minifier

CSS formatting expands compressed selectors and declarations into a readable stylesheet. Minification performs the opposite transformation by removing comments, collapsing whitespace, and tightening punctuation.

Common uses

• Review bundled styles during debugging.
• Standardize indentation before a code review.
• Compare source and output sizes.
• Prepare compact examples for documentation.

Beautify versus minify

Mode	Best for	Result
Beautify	Editing and review	Indented selectors and declarations
Minify	Delivery and caching	Smaller, compact stylesheet

Beautify mode is easier to scan when checking cascade behavior, media queries, and repeated declarations. Minify mode is useful after editing, but production build tools usually provide stronger optimization, source maps, and syntax validation.

Example

Input:

.card{color:#334155;padding:1rem}.card:hover{color:#4f46e5}

Beautified:

.card {
  color: #334155;
  padding: 1rem
}

.card:hover {
  color: #4f46e5
}

The formatter is intentionally lightweight and does not parse every CSS dialect. Standard CSS is supported; SCSS nesting, Less mixins, and other preprocessor features should be checked with a parser after transformation.

Programmatic equivalents

JavaScript:

const compact = css
  .replace(/\/\*[\s\S]*?\*\//g, "")
  .replace(/\s+/g, " ")
  .trim();

Python:

import re

compact = re.sub(r"/\*[\s\S]*?\*/", "", css)
compact = re.sub(r"\s+", " ", compact).strip()

Privacy and validation

Processing runs locally in the browser; pasted CSS is not uploaded. Because this is a lightweight formatter rather than a complete CSS parser, inspect output containing strings, custom properties, comments, or preprocessor syntax before shipping it.