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;
}
a.menu{
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;
}
a.menu
{
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 http://www.cleancss.com/
