Dust-Me - new FF addon to find unused CSS selectors

'Spring Clean" your site CSS files

[SuzyUK]

Dust-Me [sitepoint.com]

Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors.

.....

You'll end up with a profile of which selectors are not used anywhere on the site.

I have just installed this, so don't know how it works yet. It might still be in test phase - but I know many members have asked for something like this.

It should, by its description, be especially useful if you've taken over a legacy site and don't want to delete rules for fear that they may still be in use somewhere on the site!

[Xapti]

seems the most useful for hard to trace situations, ones that don't use classes or ids, such as form ul li input{} or div p span span{}. Thing is, good coders would never really use CSS like that.

With the find-as-you-type search feature for Firefox, as long as the page isn't big (I suppose this is mostly for larger pages, for serious web designers), you could just search the classes and IDs.. As mentioned: if no IDs or classes are used, then it's certainly handy though, even though that would be bad code.

[Robin_reala]

I can see it being useful in our company. we do a lot of work for a base set of templates we have and it's important to stop them going crufty. I'm going to try and spend an hour or two this week running the tool through our main templates and see what it throws up. As far as I'm aware they're pretty clean but we'll see :) The more observation tools the better.

[Old_Honky]

Sounds useful for those of us who sometimes forget which bits were added for testing purposes and never actually deleted.

I notice it's not an "official" FF add-on. Is it safe to download, or will it stuff my machine with unwanted pop-up advertising?

[Old_Honky]

I just downloaded and tried it and I am not impressed. It gave me a list of 367 unused selectors most of which are most definitely used and including lots of a:focus and a:hover variations which I assume it thinks are unused because nobody was hovering or focusing at the time I ran it.

Either it is useless or I am missing something here.

[SuzyUK]

OH,

it's still in the beginning phase - and it really would benefit from a spidering capability - and reading the release blog post for it, that seems to be top of the list for next development :)

>>missing..
What you have to do, for the minute, is surf the site you're checking with the extension running it will pick up extra stylesheets and remove "unused" selectors from the 'data list' as they are found/used in the site (you can download this list into csv/excel to make it easier to read)

It's not ideal at the minute, I agree, as it's fairly impossible to manually surf every page of a very large site, however I found (testing on a small personal site) that it was easy enough for me to spot which pages I need to surf to in order to clear large parts of the list (e.g. - form css - visit a page that uses the reply form, image css - visit a page with images..)

what I got left with was 1 unused selector and all my form CSS (that's because I no longer have reply pages ;))

It should work well for spotting large chunks, but I agree it's not ideal as yet for spotting those one-off selectors that are perhaps still in use in a couple of outdated pages

but if it gets spidering capabilities it should be the bees knees ;)

[edited by: SuzyUK at 4:05 pm (utc) on Aug. 7, 2007]

[Old_Honky]

Doh! I didn't RTFM, so I assumed automatic spidering. I am now trying to go through the pages manually to see if it works. It is slightly worrying that the unused selectors total goes up and down as I go from page to page, I assumed it would start high and go down.

[Robin_reala]

Are you calling in extra stylesheets on other pages or including inline CSS? That'd make the selector count go up.

[SuzyUK]

was going to mention inline CSS or imported stylesheets..
but Robin beat me to it :) - yes it took me a minute to figure than one too. If you open up the data window it often doesn't look as bad as the total show in the status bar, the way it segregates the stylesheets is pretty good, I thought anyway...

a sidenote: at the minute this only works with linked/imported stylesheets or inline CSS - it doesn't work with embedded CSS (css in the <head> of the page)

[OT]

..even though that would be bad code

IMHO that would be good code ;) - no evidence of classitis in sight :)

If IE supported advanced selectors it would be possible to CSS a site with or without classnames providing the HTML is good/clean - suggestion: as an learning exercise you could try and custom CSS this site (not in IE of course!) using the existing HTML!

(warning: it will do your head in but it will show how custom CSS, as opposed to schoolbook perfect CSS, should work!)

the fact the add-on picks it up is good though!
[/OT]

[edited by: SuzyUK at 5:29 pm (utc) on Aug. 7, 2007]

[Old_Honky]

No I'm not using in-line styles, I do have additional style sheets for one section but I started there so I assumed those pages would be the worst case scenario.

I'll run it again to check (when I have the time) and then comment out all the allegedly unused selectors and see what happens.

[vincevincevince]

Blimey. 149 unused from 2 stylesheets.

[Robin_reala]

Over your entire site? Sounds like a lot...