In a perfect world, lost somewhere in a parallel universe, websites are designed, built and then run smoothly forever and nothing ever changes.
In this world sites are built, iterated, added onto, redesigned, extended, partially rebuilt and tweaked until they resemble the Winchester mansion. Instead of doors that open into space or stairs that go nowhere, websites are littered with commented-out HTML, inline styles and unused CSS rules.
We all try to write better CSS, but at some point it seems to end up a tangled mess that needs refactoring.
Refactoring stylesheets can be difficult, especially when it comes to pruning the old, unused styles – how do you know which rules your sprawling labyrinth of HTML is actually using?
That's where the Firefox/Opera add-on Dust Me Selectors can help. Dust Me Selectors grabs your stylesheets, looks at all your selectors and then starts parsing HTML to find out which ones you're actually using. Dust Me Selectors makes the process of refactoring a stylesheet much easier and definitely deserves a spot in the savvy developer's toolkit.
You can grab Dust Me Selectors from the developer's website or from the Mozilla Add-ons site. Opera fans can install Dust Me Selectors from the Opera extension gallery.
Dust Me Selectors can crawl individual pages or you can take the more useful approach – point it to a sitemap and sit back and wait while it looks at your entire website.
Armed with the output from Dust Me Selectors (which can be exported as a CSV file), you can start pruning out those unused selectors, paring down your stylesheets and making them smaller as well as easier to read and maintain. Naturally you'll want to do some testing before you permanently delete anything, and hopefully you've got everything in version control just in case you need to roll back your changes.
