CSS Housekeeping

Even the most accomplished web builders are guilty of bloated CSS files.  Any developer or designer that tells you that their CSS file is 100% streamlined is probably fibbing.  Especially if you’re discussing a CSS file for a site that recently launched.  You wouldn’t believe how easy it is for a CSS file end up with tons of unused classes and selectors during the iterative steps as a project nears completion and launch.

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.

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Post a Comment

Your email is never published nor shared. Required fields are marked *