Neal Grosskopf Dot Com A NG Designs Site

As a website grows so does its stylesheet. The problem is, the opposite is not true. As a pages get removed, seldom do the selectors in the external stylesheet. This becomes even worse with multiple employees, especially if people come and go. Enter CSS Usage.

CSS Usage

Above is an example screenshot showing selectors in green that were found and selectors in red that were not. As a website is browsed, the tool will continue to re-analyze the stylesheet.

I found this Firebug extension a couple weeks ago and thought it was worth talking about. CSS Usage shows up as a tab within Firebug so if you don't have that extension yet, head over to Mozilla's addon site and download it - https://addons.mozilla.org/en-US/firefox/addon/1843

The jist of CSS Usage is to scan your stylesheet selectors and HTML to determine if each selector is used. Used selectors are colored in green while unused selectors are colored in red. Selectors previously found on other pages are colored in dark green

By default it will only analyze a page if you hit 'scan' but I like to turn on the auto-scan feature and just browse around my site for about 20 pages to give it a good mix of selectors. After that I had only a handful of selectors that were left unused. I took those selectors and did a site wide search to try to identify if they were used.

Cons

There are a few drawbacks with the addon. Currently it will only scan pages you visit. It does not have the ability to scan your entire site. Sites with 100's of pages may be difficult to scan with this tool. I also found the line numbering to be a bit flaky (as seen in my screenshot above).

Pros

Some great pros of this addon include cleaning up your stylesheets and reducing filesize. You can also save a little bandwidth by making them smaller in size.

Download

Head over to the CSS Usage page on Mozilla's addon site and give it a try.