Why does this matter?  The biggest reason would be page load times.  If you have a number of unused id and class definitions in your CSS file, they’re doing nothing but adding time to your page loads.

So what’s the best way to keep that CSS file feeling tip-top?  Enter Sitepoint’s Dust Me Selectors extension for FIrefox.  What it does is scan your CSS and XHTML and provide you a report of used and unused selectors in your CSS file.  You can set it to run for a single page or your entire site.

I recently ran this on the CSS file for Red Pill and found out (much to my horror) that there were more unused classes and ID’s than there were selectors in use.  So using the report that the Dust Me Selectors extension, I started going through our CSS file and making changes.  Helpful hint, best to comment out lines in your CSS file carefully.  The report you are given provides you line numbers to go straight to, but if you’re deleting lines from your CSS file, the line numbers will change, and the report becomes less of a utility and more of a treasure map.

So here’s how I added the 3 column superfooter onto Red Pill.  All it takes us some clever CSS that blends up ID and CLASS selectors.

Here’s how I did it.

First, define a ID selector for the area in which the 3 columns will go

div #superfooter-columns {
        margin: 0 auto;
        width: 730px;
        font-size: 1.1em;   
        width: 730px;
        clear:both;
        text-align:left;
        z-index:1;
    }

Then, add a class that will be used on each column

#superfooter-columns .footercol {
    float:left;
    overflow:hidden;
    position:relative;
}

Then, add some css for each column – A, B, and C

#superfooter-columns #footercol_a {
    margin: 0;
    width:229px;
    padding: 10px 2.5px 30px 10px;
}

#superfooter-columns #footercol_b {
    margin: 0;
    width:229px;
    padding: 10px 2.5px 30px 10px;
}

#superfooter-columns #footercol_c {
    margin: 0;
    width:229px;
    padding: 10px 2.5px 30px 10px;
}

Adjust the widths and padding appropriately for your site layout.  Once you have that basic skeleton in place you can start filling the divs in your XHTML with the content you want.  I’ll talk about the features I stuck into the superfooter in tomorrow’s post