Cool tool for cleaning up CSS stylesheets

Every now and then I come upon a stylesheet that someone created which is hard to read–sometimes, even hard to look at. (Like when everything is all jammed together with barely any line breaks.)

Call me spoiled, but I like to see my CSS styled like this:

.prev {
width: 225px;
padding:7px;
float: left;
}

.next {
width: 225px;
padding:7px;
float:right;
}

#headerimage {
position:absolute;
left: 425px;
top:4px;
width:270px;
}

not like this:

html,body,div,span,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;vertical-align:baseline;outline:none;font-size:100%;background:transparent;border:none;text-decoration:none}b,i,hr,u,center,menu,layer,s,strike,font,xmp{margin:0;padding:0;vertical-align:baseline;outline:none;font-size:100%;font-weight:normal;font-style:normal;background:transparent;border:none;text-decoration:none}font{color:#333}center{text-align:left}body{line-height:24px;font-family:Georgia,Times,”Times New Roman”,serif;color:#333;background:#fff}h1,h2,h3,h4,h5,h6{font-style:normal;font-weight:normal;margin:0 0 21px 0}h1{font-size:1.8em}h2{font-size:1.7em}h3{font-size:1.55em}

Luckily there is a sweet-ass tool on the web that will take something like the messy block above and pretty it up, a la the pretty bit above that. This CSS Formatter/Optimizer has all sorts of settings so you can fine-tune your results, and it can go both ways…if you want to condense your pretty, spaced-out CSS into the solid-block format (for a smaller file size and quicker load time), you can do that too. There are a lot of neat specific options, so you can auto-modify your stylesheet to suit your taste.

I’ll be using this any time I run into a stylesheet that someone else created in their own wack way–which happens a fair amount. If there’s one thing I’ve learned from ~10 years of PHP/CSS template-based work, it’s that every template/theme creator does things his or her own way. This CSS Optimizer tool will go a long way toward bringing things to my standard–or yours.

It’s not 100% clear who made the web tool, but I had to guess, I’d say credit goes to Florian Schmitz, the creator of CSS Tidy (the desktop software that the web tool is based on). Thanks Florian – great tool!