It's been awhile since I've posted. Frankly I just haven't had anything to talk about. I thought I'd write up a quick article on a useful tool I found the other day called CleanCSS. If you're interested in the topic of CSS file maintenance and structure like I am, you may want to read my companion article Organize Your Stylesheet Madness & Reduce It's File Size With These Tips.

What Is CleanCSS

CleanCSS allows you to take existing CSS and format it to a much more pleasant format. An example of this was a CSS file I was working on that appeared to have multiple contributors i.e.

BODY { COLOR: #000000; } .someclass { color: black; font-size: 24px; font-family: Arial, Helvetica, Geneva; margin-left: 22px; font-weight: 700; } .someotherclass { color: black; font-weight: 700; }{ color: white; font-size: 10px; text-decoration: none; font-family: Arial, Helvetica, Geneva; margin-left: 5px; margin-right: 3px; } .whitetext-small { color: white; font-size: 9px; line-height: 12px; }

As you can see, when multiple developers get working on a single file, over time, the formatting of the file loses consistency. Tabs may be ignored, alpha-numeric property sorting may be ignored and some developers might uppercase things while others many not.

CleanCSS offers many quick options to easily format your CSS. On the flip-side it will also compress your CSS if your overly concerned about filesize like my former co-worker and semi-famous friend Tim Kadlec is.

Our Example CSS Cleaned Up

After running the above CSS through our cleaner, it outputted the following nicely formatted code:

body { color: #000; } .someclass { color: #000; font-family: Arial, Helvetica, Geneva; font-size: 24px; font-weight: 700; margin-left: 22px; } .someotherclass { color: #000; font-weight: 700; } { color: #FFF; font-family: Arial, Helvetica, Geneva; font-size: 10px; margin-left: 5px; margin-right: 3px; text-decoration: none; } .whitetext-small { color: #FFF; font-size: 9px; line-height: 12px; }

Feel free to give CleanCSS a spin on your next project at