How-to clean CSS stylesheets fast

 

Just another quick tip but might be useful for you, lazy web developers, out there. Recently I needed to clean CSS stylesheets for one of my projects which has a theme from years ago ( 2007 or 2008 ) and needless to say many changes where done since.

I didn’t want to manually try half of the selectors and see if it would change anything somehow so I started to look for some online tools to do this tasks. There are quite a few but in the end I went for a Firebug extension called ‘ Dust-me selectors‘.

The way it works is quite inventive. Instead of trying to scan and parse your pages you can simply select ‘scan’ and click around your site. Every selector encountered is listed as ‘used’ so in the end you end up with a list of unused selectors which you can export to another file.

If you have a very polluted stylesheet you can just replace to old one (backup!) with the new one and start working from there by deleting the UNUSED tags Dust Me creates and rebuilding whatever needed to be done anyway. In my case I just a diff tool to just for differences and work my way through the stylesheet in this matter.

Hint: If you are scanning your pages be sure to click through every possible page. Especially unfolding menu’s and selectors like a:hover, a:visited are sometimes ‘forgotten’ while being in use.

Conclusion

Dust-me selectors is not a magic stick which will output very clean CSS just by the click of a button but is a very useful tool to help you in cleaning CSS stylesheets in an organized way.


'float:left')); ?>