DEV Community

Dev Nestio
Dev Nestio

Posted on

I built a CSS Minifier and Beautifier — browser-only, compression stats, 80 tests

#webdev #tools #javascript #css

Most CSS minifiers send your code to a server. I built a free, browser-only CSS Minifier and Beautifier that processes everything locally and shows you compression stats.

Live Tool

https://devnestio.pages.dev/css-minifier/

What it does

  • Minify: removes comments, whitespace, trailing semicolons before closing braces
  • Beautify: reformats minified CSS back to readable indented form
  • Stats: before/after bytes, bytes saved, compression percentage, rule count
  • Options: keep comments, keep last semicolon
  • Swap input/output for quick re-processing
  • Examples: simple styles, media queries, CSS variables, keyframes, pre-minified
  • 100% client-side — your CSS never leaves the browser

Example

Before (287 bytes):

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: Arial, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

After (64 bytes):

body{margin:0;padding:0;background-color:#fff;font-family:Arial,sans-serif}
Enter fullscreen mode Exit fullscreen mode

The beautifier uses a character-by-character tokenizer that handles vendor prefixes and calc() expressions without a full CSS parser.

Testing

80 tests, all passing.

All tools at https://devnestio.pages.dev

Top comments (0)