We use cookies to keep our site relevant and easy to use, your continued use of this site is consent that we may set several cookies (see our Privacy & Cookie Policy), click to always allow cookies from our site (and not see this notifcation on your next visit) or read more.Allow Cookies

EU legislation requires that all websites clearly specify if cookies are being used and their purpose, You can read more about how we use cookies (and which cookies we use) in our Privacy and Cookie Policy.

You will see this notification the first time you visit our website unless you accept cookies (in which case we'll set a cookie to remember thay you're happy for us to to set cookies!).

CSS Style overload – Remove unused CSS Styles

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:

This entry was posted on Tuesday, October 23rd, 2007 at 12:30 pm and is filed under Browsers, Programming. You can follow any responses to this entry through the RSS 2.0 feed.


Comments (20)

 

  1. baldo says:

    thanks for reporting my post / blog ๐Ÿ˜€

  2. Keiron says:

    You’re welcome! It’s a fantastic little tool!

  3. sujith says:

    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รขโ‚ฌยฆ.

  4. Keiron says:

    Hi Sujith,

    I think the key is that you have to browse around the whole site with it.

  5. sujith says:

    Hi Keiron ,
    Thanx. i too think thats the only work around. ๐Ÿ™‚

  6. sam says:

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

  7. Keiron says:

    I haven’t seen that – is that in a new version?

  8. Scott says:

    Baldo is god! The best plug in ever!!!

  9. Brian says:

    How do you actually remove the styles? All you have is a csv file of selectors. Am I missing something?

  10. Keiron says:

    Brian, You have to go and remove them from your css file.

  11. Dave says:

    I was just contemplating writing something similar.. but thought i’d google it first. Excellent plugin just what i needed!

  12. Derp says:

    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.

  13. Keiron says:

    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!

  14. redbourn says:

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

  15. Keiron says:

    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?

  16. Kayla says:

    Bye bye CSS bloat !!

  17. Chris says:

    Thanks for mentioning this helpful tool! It’s exactly what I was looking for!

  18. John says:

    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.

  19. Travis says:

    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?

  20. Liz says:

    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.

Leave a Reply