Skip to main content

Find unused CSS selectors with “Dust-Me Selectors”

By James Edwards

Programming

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

And here it is — enjoy!

 

Comments, thoughts, suggestions for the next version? I’d love to hear what you think.

James is a freelance web developer based in the UK, specialising in JavaScript application development and building accessible websites. With more than a decade's professional experience, he is a published author, a frequent blogger and speaker, and an outspoken advocate of standards-based development.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!