Free Information Technology Magazines and eBooks

Monday, June 29, 2009

Check for unused CSS on a Website

Check for unused CSS on a WebsiteSometimes during creation of new website project, we often add CSS style elements that later we might no longer use. These unused CSS can make your web pages bigger in size and codes become larger. Checking it line by line can be tedious and for old pages it is unpractical. But worry no more, there is now a Firefox add-on which can be used to find unused css and this tool is called Dust-Me Selectors.


What it can do is, it extracts all the selectors from all the stylesheets on the page then analyze which of those selectors are no longer in use. The result is stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.

dust-me selectors view dialog

The Unused selectors tab in the view dialog shows you a list of all the unused selectors that have been found, grouped by which stylesheet they're in.

dust-me selectors mark it

The view dialog has a context menu — select one or more item in the list and you can Mark it.

dust-me selectors save it as csv

You can save the data from any tab in CSV format, suitable for importing into a spreadsheet program.

Download Dust-Me Selectors via SitePoint.

For more cool softwares discoveries, subscribe now.

1 comments:

Ken said...

and what if you have 1,000 pages on your website?

I'm using dust-me for small websites and is doing an extraordinary work, even that I have to compare the results for every each website page to remove the unused css tags but for larger websites it's useless, unfortunately.

This being said, do you know another tool which can provide a site wide check for unused CSS selectors?

Thanks!