You may be aware of js unminifiers or beautifiers (such as jsbeautifier). I found myself wanting something similar for making minified CSS legible, so I built a simple tool using javascript to unminify CSS. It uses several regular expressions (and sometimes a split followed by a join) to generate the clean code and it also lets you specify tab width. I included a minified sample in case you want to give it a try.

p{font:normal 14px/20px helvetica,arial,sans-serif;color:#333;}.woot{font-weight:bold}

Unminify   tab width:  


Note: the easiest way to look a site’s CSS is to use a tool like firebug on firefox, but sometimes you still might want to view the full source to see any browser-specific hacks that won’t appear in firebug or to just take a peak at how someone may organize his or her code.

Update: June 2011—It’s now all the rage to drop the semicolon from the last declaration in a CSS rule (right before the closing brace), so I updated the unminifier to handle this case and put an example in the sample CSS.

Update2: September 2011—the CSS Unminifier now exists a standalone script that you can run on your computer. I converted it to a node project, which you can install with npm (Node Package Manager) using npm install cssunminifier and you can see the code on the github page.

Inspired by MrColes