« Back to Fireday

Dust-Me Selectors

August 24th, 2007 at 4:00am — Rating: Firefox pointFirefox pointFirefox pointFirefox pointFirefox no pointLink

I've always been a fan of CSS and no doubt, I'm always trying to move towards the semantic web mentality. Even though CSS is one step in moving you towards the semantic web, there are times when you are coding a web site or application and you lose track of what CSS class or selector you've left in the dust.

This is where I fade into the overview of this week's extension appropriately named Dust-Me Selectors.

Overview

Dust-Me Selectors is a simple and small utility for developers who build web sites exclusively with CSS. The extension loads the current web page's style sheets and looks for orphans (styles that aren't used) in the web page.

Installation

Dust-Me Selectors was an easy install and appears in your status bar as a clipboard icon.  I tried to move the icon to another status bar, but unfortunately, the icon is fixed to stay on the status bar. This is one drawback because of the real estate necessary for other add-ons/extensions.

Features

Most of the Dust-Me Selectors features are few, but include the general tools to get the job done. Navigate to a web page, localhost or public site, and left-click on the icon to kick off the process. You'll notice that the icon starts counting all of the CSS classes and selectors in your current web page. Clicking it again before it finishes stops the process.

After the Dust-Me Selectors extension finishes, it displays a dialog box with the entire list of CSS classes and selectors that aren't found in your web page. Now, those classes and selectors may be used in other pages on your web site, but according to this dialog box, they are currently not in use on this web page.

If you've done a good job of building your site and made it consistent, you'll probably have a low amount of CSS classes in the dialog box after the extension finishes. Of course, since this is only one page on your site, you may need to visit the different content pages based on your template page for your site to get an accurate figure of where your orphan CSS classes and selectors are at.

As soon as the extension finishes, the dialog box is immediately displayed with the results of its findings. The dialog box provides a way for you to save your results to a .CSV file for you Excel jockeys, clear your list, or click OK to close it.

Dust Me Selectors dialog Box

Configuration

All of the configuration options are provided through the context menu when you right-click the icon.

At any point, you can activate the extension by using [CTRL]+[ALT]+F. If you want to view your results from a previous scan, select the View Saved Data option and the dialog box will reappear. Also, if your finished with viewing your results and want to move on to another web page, click the Clear Saved Data.

The last option in the context menu pertains to running Dust-Me Selectors automatically every time you load a web page. Not every time Firefox runs. I personally have that turned off to maximize the page loading performance.

Dust Me Selectors Status Bar Menu

Conclusion

After playing with Dust-Me Selectors for a week, I noticed performance was snappy and very responsive. Its very compact and the interface for how to display the progress was very well-thought out.

As noted above, the feature of being able to move an extension indicator from the status bar to another bar was missing and to me, it's a sorely missed feature that most extensions should have the innate ability to perform.

I would definitely recommend this extension to web devigners and rate this extension a 4 out of 5.