Clean up your CSS with Firefox plugin

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.

Dust-Me Selectors

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.

Related articles:

Tags:, , ,

15 fantastic comments

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!

David – I’m sure once you’ve had you new theme for a few months and added a few tweaks here and there, it won’t be long before you start forgetting what half of the CSS does. I know I do.

Tara – I feel your pain, although unfortunately I’m not aware of any IE-proof tools. To be honest I think you should just learn to do CSS the correct ’standards’ way of doing it first. If you can make something look OK in Firefox you’re probably doing everything right. Learning how to make IE behave is another challenge, but if you know your CSS is correct, slipping the ‘hacks’ in should become easier.

Johno – No problem mate – glad this post is of use to you.

Had I seen this before I changed my theme, I might have cleaned up the other one instead of starting over :D 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!!!

Paul – Sounds like you’ve just volunteered yourself into a little weekend project. Thanks :)

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!!

Hi Eguru – thanks for the comment. Without wishing to state the obvious, any selectors that are NOT highlighted by Dust-Me will of course be used. So just by looking at the CSS file you will know that they are all being used.

Is that what you mean?

Aron,

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????

thanks

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?

Julian – I haven’t tried it on any my dynamic ajax-ey work, but I doubt the plugin will detect it until the ajax content has been loaded.

Comments closed

Comments have been closed across this site.