How can I find unused images and CSS styles in a website?

Question

Is there a tool or methodology (other than trial and error) I can use to find unused image files? How about CSS declarations for ID's and Classes that don't even exist in the site?

It seems like there might be a way to just spider the site, profile it, and see which images and styles are never loaded.

Answer 1

I seem to recall either Adobe Dreamweaver or Adobe Golive having a feature to find both orphaned styles and images; can't remember which now. Possibly both, but the features were well-hidden.

Answer 2

There's a Firefox extension that finds unused CSS selectors on a page. It has an option to spider the whole site.

http://www.sitepoint.com/dustmeselectors/

Answer 3

At a file level:

use wget to aggressively spider the site and then process the http server logs to get the list of files accessed, diff this with the files in the site

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

Answer 4

TopStyle has a suite of tools for locating and dealing with orphan classes. It will also give you reports on where IDs and classes are used in the HTML, allowing you to quickly open and skip to the relevant markup. Here's the blurb from the website regarding this feature:

Site Reports: See at a glance where styles are used in your site. Find out where you've applied style classes that aren't defined in any style sheets, or see what style classes you've defined that aren't being used.

Very useful for dissecting unfamiliar websites.

It doesn't find unused images, though.

Answer 5

Try WARI - Web Application Resource Inspector.

It finds unused images, unused and duplicate CSS/JS.

Link: wari.konem.net

Answer 6

CSS Redundancy Checker is an on-line tool very easy to use.

Here is the new link, so I won't get any downvotes: http://code.google.com/p/css-redundancy-checker/