FormatBentoCSS
CSS formatter & minifier
Beautify CSS, SCSS or Less with Prettier, or minify a stylesheet for production and compare the sizes, gzip included.
The formatted code lands in this compartment. Ctrl + Enter formats from the keyboard.
Syntax error
Ready. Paste code, open a file or press Sample.
Runs in your browser · nothing is uploadedBeautify or minify
Beautify uses Prettier's PostCSS printer: one declaration per line, consistent spacing, and lower-case hex colours and units. Choose SCSS or Less for their variables, mixins and nesting.
Minify works on plain CSS and offers two strengths:
- Full (csso)
- Removes whitespace and comments, shortens colours and zero values, and with Merge rules combines selectors that share declarations.
- Whitespace only
- Removes comments, the final semicolon in each block and whitespace CSS ignores, and nothing else. It keeps the spaces
calc()and descendant selectors need.
csso predates native CSS nesting and would drop nested rules, so stylesheets that use nesting, or anything csso cannot parse, are minified with the whitespace-only pass automatically, and the status line says why.
Questions
Can I minify SCSS or Less?
Compile them to CSS first; browsers only read CSS. Beautify handles both.
Why is the gzip size so much smaller?
Servers compress stylesheets on the way out, and CSS repeats itself a lot. Gzip is roughly what visitors download.
Is my stylesheet uploaded?
No. Prettier and csso run in this tab.