Just finished up redesigning my 4th site in the past 5 weeks (along with 4 relocations and 2 migrations). I love starting with a brand new template and coding something very clean and neat, however sometimes it is just better to update existing templates. Anyone who has reworked templates for a major set of changes knows that sometimes it feels like things are messy and out of control.  Especially with stylesheets.

I still have not found a decent way to order classes in a stylesheet that makes any sense (and is maintainable) but search functions make that passable. However, I still cannot help but feel like the stylesheet is messy since I really have no idea which classes I’ve obsoleted vs. which classes are still used by some obscure template I never touched.  I’ve always been meaning to find a better solution to this then my usual method: <i>leave them all there – just in case</i>.  A clean and tidy stylesheet reduces server load and is easier to maintain.

So instead of doing the work I was supposed to be doing today, I goofed off and coded a little stylesheet analysis program.  The idea is pretty simple:

• Read the stylesheet and parse out the style definitions
• Read sample pages from the site and track which styles are referenced
• Report back which pages use what styles, and which styles are not used at all

My original concept involved reading the sitemap.xml and checking all pages, but that would be a waste of resources for sites with any amount of history.  (Although it might be useful for a site where stylesheet styles were used in individual posts!)  Instead, I settled on a q&d (quick and dirty) php script driving a html form that lets you supply the stylesheet url and up to 9 urls from the site to analyze.  The idea is to add the index, date archive, category archive, about page and maybe a few individual posts so you get a sampling of every template in your theme.

The coding (and debug) took about 90 minutes and I’m pretty pleased with the result.  This little tool (named StyleCheck) makes it very easy to eliminate the chaff from your stylesheet.  Give it a try if you like: StyleCheck or download the source to see how it works and maybe improve it: StyleCheck Source Code. (And don’t laugh at the form or the code – again, this is a q&d project.)

Now to go and clean up some stylesheets.

Update: Here are a few more operational details and or caveats:

• When the stylesheet is scanned, all non-id and non-class items are ignored.  Also, derivative classes (i.e. ‘.myclass a’ or ‘.myclass ul li’) are reduced down to the base class name.
• When the html is analyzed, anywhere a class is used is consider a single use of that class.  The actual content is never checked, so if ‘.myclass a’ is defined as in the stylesheet, the analysis doesn’t look for anchor links in any element classed with .myclass.  It just knows that .myclass is defined in the stylesheet and looks for any use of it in the html.

Improving both of these items is very possible, but I just wanted a general tool that helps me identify unused class families plus I was spending time I did not have.