Wed. February 3, 3:50:54 AM
Thnx! This addon looks awesome!
Find Unused CSS Selectors With CSS Usage, A Firebug Extension
Recent Articles:
- Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
- Tracking Internal Website Campaigns With Google Analytics and PHP
- Everything You Need to Know About jQuery's .data() Method
- Google vs. China: How It Will Affect Web Workers
- Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
Subscribe To Feed
Subscribers
Subscribers
Jan 27
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.
Replies:
-
Wed. February 3, 4:14:27 AM
Nice find, afraid it's pretty useless though unless it can scan a whole site :(
-
Wed. February 3, 4:15:28 AM
Looks like a really good plugin, which is exactly the kind of thing I need on one of my sites as I was about to go through all the selectors manually (there's a lot there that doesn't need to be).
-
Wed. February 3, 7:07:47 AM
I've been using Dust-Me, which is another Firefox extension, for years. IMO its the best around and, unlike this one, it can check an entire site.
It was released by Sitepoint and can be found at http://www.sitepoint.com/dustmeselectors/
-
Wed. February 3, 7:15:32 AM
Look forward to getting this to work.
I always use Firebug, so this would be great, yet, after installing new version, nothing has changed, no new features.
-
Wed. February 3, 10:37:20 AM
Agree w/Rob Brown (comment #2) ... without the ability to scan an entire domain, the addon falls short. (Instead, will look at Dust-Me.
-
Tue. February 23, 11:57:43 AM
It's a good plugin, and I've found it useful so far, but it is a bit dangerous. For instance, classes that are in hidden divs (to be revealed on a JavaScript click, for example) show as being unused. I've also seen other cases of it reporting a declaration unused, when in fact it is used.
It's good, but as they say, caveat emptor. I'll also check out this Dust-Me.
-
Sat. July 31, 1:14:04 PM