Find unused CSS selectors with “Dust-Me Selectors”
Regular readers will be well aware of the work we’ve been doing over the last few months to improve the SitePoint Contests and Marketplace. My role in all of that has been to improve the front-end — better semantics and accessibility, more efficient code, no unecessary scripting, and a reconciliation of all the disparate bits of CSS that were styling it.
As you can imagine, I inherited a lot of legacy CSS, both from the old Marketplace, and from the site in general. I needed some way of separating this out, of keeping only the rules we actually needed.
If you’ve ever worked on a large project — especially where several people are all working on the same stylesheets — you’ll know how quickly it can get out-of-hand. Styles are added over time, then forgotten about, and coming back on a stylesheet months (or in this case, years) later can be a scary experience. How much of that is necessary? You don’t always know, but you fear deleting anything, in case something, somewhere is using it.
I needed a tool that could work this out for me — something I could run in the background during development that would build up a profile of which rules are not being used anywhere. And since there wasn’t anything out there to do this job (at least, nothing that I or any of my colleagues could find), I wrote my own — initially as a Greasemonkey script, and finally as a full-blown Firefox extension.
Comments, thoughts, suggestions for the next version? I’d love to hear what you think.
