Validating CSS files

Question

I have a CSS file that has grown over time. Many of the coders have come and gone. The site has changed along the way and some of the code in the CSS is no longer being used. Is there a QUICK way to validate what is being used and what is not? I need to remove the OLD code that is no longer being used. Even if there was a "site map" method - that would prove to be even better. All suggestions please.

Consultation

Be careful not to remove selectors that get used only by dynamically-generated code. – Bucovina

Answer 1

If you use Firefox, you can use the Dust Me Selectors plugin that does exactly what you asked for. It finds unused Selectors for you :) Give it a try!

Also there is the CSS Usage plugin, that looks over your CSS file and tells you which ones are not being used. :)

Karinekariotta

Answer 2

• Dust-Me Selectors for Firefox
• CSS Redundancy Checker
• Unused CSS
• Identified Unused CSS
• Helium CSS
• CssCleaner windows
• DeadWeight Ruby
• cssess, a bookmarklet that helps you find unused CSS selectors on any site.

Ironmaster

Answer 3

I've given @Kyle Sevenoaks +1 for his answer, as Dust Me Selectors is a very good tool.

However, I would like to add a few points (more than I could fit on a comment, hence writing this as an answer):

Even once you've got the results from Dust Me, you still have to be quite intelligent when going through the results, as it can give false positives and false negatives:

False positives can come where a selector is specified in your CSS, but isn't used on the current page. But be aware that it might still be used in other pages in the site, so don't just run it on your home page and expect to get the final results; you need to test every page in your site and combine the results.

Additionally, if you have any Javascript code that adds elements to the page at run-time, or changes the classname of an element, then they could pick up CSS selectors that aren't in use when the page first loads.

False negatives can happen if a selector is used in the page, but is nevertheless redundant because it is always overridden. Sites like the one you describe are ripe candidates for this sort of thing, where a new style has been added at a later date for something without removing the old styles. I don't know whether Dust Me can pick this sort of thing up, but they can certainly be tricky to spot, because again you need to be sure that they really aren't used either in that context or in any other context.

So my message would be that an automated tool is a good idea, and I'd definitely recommend Dust Me, but don't rely on it.

Exploratory

Thanks for the +1! This is some very useful advice! – Karinekariotta

Answer 4

I've found Dust-Me Selectors works fine for single pages, but I can't get it to spider through a site of 400+ URLS (using an XML file as the index). It typically gets through 20 to 30 URLs, then just hangs. The cumulative report on which selectors are in use doesn't seem to work either - I'm guessing it is just showing the results for the last page viewed.

I'm seen similar comments about the spidering functionality elsewhere. Maybe this just doesn't work reliably yet?

Corrective

Answer 5

CSS Formatter and Optimiser + Validates your CSS in the process I love it: http://www.cleancss.com/

Tadtada