I design sites (not well most of the time!) and often pinch bits and bobs from the various CSS stylesheets I’ve created over the years, generally I normally end up coming up with something that looks at least half decent!
However, all that cutting and pasting leaves my stylesheets in a mess – with tonnes of unused CSS styles!
I spotted a reference to Dust-Me Selectors today on San Baldo, and using this fantastic Firefox Extension I have managed, in the space of minutes to reduce on stylesheet from an unmanageable 600 lines to a mere 200!
It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored in your user preferences, so that as you continue to navigate around a site, selectors will be crossed off the list as they’re encountered.
You’ll end up with a profile of which selectors are not used anywhere on the site.
If you found this post useful, why not buy me a coffee or a beer (depending on the time of day obviously!):
[donate]
If you really want to learn about CSS you need to be reading some of the following books:
thanks for reporting my post / blog 😀
You’re welcome! It’s a fantastic little tool!
HI,
But this tool will help only to show the one unused in current page. It will be helpfull if it show unused css in thw whole site, becuase we will be able to delete tht classes from css….
Hi Sujith,
I think the key is that you have to browse around the whole site with it.
Hi Keiron ,
Thanx. i too think thats the only work around. 🙂
it has an option to spider your site, all you have to do is point it to the site map. i really cant believe how good this plugin is.
magic!!!!!
I haven’t seen that – is that in a new version?
Baldo is god! The best plug in ever!!!
How do you actually remove the styles? All you have is a csv file of selectors. Am I missing something?
Brian, You have to go and remove them from your css file.
I was just contemplating writing something similar.. but thought i’d google it first. Excellent plugin just what i needed!
This plugin is cool and all, but am I really going to go through 300 selectors and remove them all one by one? It’s not really useful to me unless it could somehow output a file with the css selectors already removed.
I agree an output file would be good, but getting it to work might be more difficult – say you miss a page and it deletes a bunch of styles you actually need – that’s not going to look good!
I ran the program on this site and found 112 selectors 🙂
Mike
.-= redbourn´s last blog ..Did Man Really Evolve From Apes Or Was He Always A Separate Species? =-.
Ah but I’m using a templating system, where I’m never going to use all of their selectors! To be honest in a day of broadband how much does an extra 4k of CSS styles cost in download time?
Bye bye CSS bloat !!
Thanks for mentioning this helpful tool! It’s exactly what I was looking for!
Hey, thanks for the tips. I also have a solution to this problem. It’s called Unused-CSS. This service will explore any site and find unused selectors/rules. It works really well.
Hi, I came across this and think that Dust-Me-Selectors is obviously a great tool, but it doesn’t work on FF 4. Baldo, do you have any plans to update it?
A potentially silly question on DustMe: was it intended to work with authentication/localhost? I’ve tried to spider and check a website in which most pages require auth, and spidering kinda just… got stuck.