Posted 7 August 2007, by Aaron
Have you ever inherited someone else’s website and not had a clue what half the CSS selectors are doing? Or tried to rehash someone else’s WordPress theme but been afraid to remove any of the CSS selectors in case you break something?
Fortunately the kind chaps at Sitepoint have developed a nifty Firefox extension called Dust-Me Selectors which should solve your style sheet woes.
Dust-Me Selectors monitors a website’s CSS whilst you surf the site and identifies any unused styles. As you move from page to page the extension builds and presents a definitive list of style sheet selectors that you can safely remove.
This a great tool which has made it into my rapidly increasing list of Firefox extensions. It’s a shame you have to manually navigate the site, so for any budding extension developers out there: how about a tool that automatically scans all the HTML pages of any given URL?
Many thanks for the previous posts’ comments: Ronald, Vivien and Randa.
Tags:CSS, Firefox, Plugins, Web Design
Nice find, Aaron!
I could’ve really done with this a few months back, and I’m sure a lot of people will get some help from it.
Perhaps there’s still some code I can ditch. I’ll give it a shot.
This looks a great idea, although probably a little beyond me at the moment. I wish someone would come up with some sort of system that would automatically put in any hack etc required to your CSS – because reading about all the hacking required for different browsers seems to be a project in itself. Anybody know of one? . I don’t know how I will ever learn it all.
Great find! This is invaluable; not only for inherited code. Often during development I write CSS for elements that I later remove from the design. It can be quite a task in larger CSS files to remove all the “orphaned” styles. And when building a larger web site, I’m always left thinking, well perhaps that style is used when…and I leave it in, just to be on the safe side.
Thanks for this!
Had I seen this before I changed my theme, I might have cleaned up the other one instead of starting over Nice one
That’s an excellent find – thanks mate! Perhaps somebody should write a Dreamweaver plugin that can scan all files in a local site and remove the unused styles from the primary stylesheet file?
Paul, that’s a great idea!!!
Weekend! Paul could do that in the time it takes to eat a bowl of Rice Crispies
Dust-Me Selectors is a great tool!! I’m just wander if any body have had the need of have the used CSS list of all used selectors instead of just the unused list of selectors. Any ideas in how to do an inverse action with this tool???
Cheers 4 the developers!!
thanks for your comment, this is very true, for few selectors, but what if I have 3 diferente sources of css’s and evry oune has more than 200 selectors? Let’s say I want to migrate few sections from my html to a diferent page, and I want to bring to the new page just the selectors for that section. If I have to exclude 300 selectors to clean my code it would be esier to just get the 20 selectors for those sections?
real life case…
hell yeah…i don’t get the scripting much so i can’t help but if i could i would be on that bowl of rice pronto!!!
the reverse idea is even better, i moved 3 dif site in one (as i really can’t stop changing my mind?!@#) i just assume i could do that using DW… but no know i have a 99.9% perfect site but with my 1499 unused selector…i just can’t find my 0,01% (which is like a millimiter of the background)
isn’t there any ways at all to automatically reomve them freakin 1499unused??????
also question for the pro what would it involed to just scan the active sectors and recreate a clean page with them???? is it harder????
If there is a ajax that request some html. Will the plugin be able to correctly dust the css apply on those dynamically retrieved content?
Comments have been closed across this site.