Find unused CSS selectors with “Dust-Me Selectors”

Tweet

Regular readers will be well aware of the work we’ve been doing over the last few months to improve the SitePoint Contests and Marketplace. My role in all of that has been to improve the front-end — better semantics and accessibility, more efficient code, no unecessary scripting, and a reconciliation of all the disparate bits of CSS that were styling it.

As you can imagine, I inherited a lot of legacy CSS, both from the old Marketplace, and from the site in general. I needed some way of separating this out, of keeping only the rules we actually needed.

If you’ve ever worked on a large project — especially where several people are all working on the same stylesheets — you’ll know how quickly it can get out-of-hand. Styles are added over time, then forgotten about, and coming back on a stylesheet months (or in this case, years) later can be a scary experience. How much of that is necessary? You don’t always know, but you fear deleting anything, in case something, somewhere is using it.

I needed a tool that could work this out for me — something I could run in the background during development that would build up a profile of which rules are not being used anywhere. And since there wasn’t anything out there to do this job (at least, nothing that I or any of my colleagues could find), I wrote my own — initially as a Greasemonkey script, and finally as a full-blown Firefox extension.

And here it is — enjoy!

 

Comments, thoughts, suggestions for the next version? I’d love to hear what you think.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.nuclearhell.tk arkinstall

    Not bad.

    I think a good upgrade would be the option to crawl all of the local pages, then give you a list of things which you haven’t used across the whole site. I use just one stylesheet to style the whole of my websites, meaning there will be alot of definitions which will only be relevent to one page.

    Maybe I’ll look into developing a Dust-Me extention for IE7 (if that’s possible).

  • Drew Robinson

    This looks great.

    I have seen a similar function provided by a Ruby script:
    http://infovore.org/archives/2007/07/06/the-css-redundancy-checker
    which was nice and fast. Someone then turned that into a Greasemonkey script:
    http://blog.workingidea.com/article/6/todays-gizmo
    however I think the GM version would have been pretty slow. A Firefox extension hopefully will be a bit quicker…

    drew

  • http://www.sitepoint.com Matthew Magain

    This is very nice work cakemeister. Works a treat and looks smart too.

  • Martin S.

    Hi, great extension. I have a request for features:
    * A regexp ignore list for selectors and filenames. For example my site uses NiftyCorners, so it includes the stylesheet in all pages. But not all pages have four rounded corners, some use only two, so I always have like 20 unused selector only from that stylesheet.
    * Also, I support what arkinstall said, it should be able to scan several pages across the site, or remember the distinct pages that use the same stylesheet and save the statistics. Then it’ll be able to tell you which page used which selector and then know what selectors are left unused.

  • http://www.brothercake.com/ brothercake

    Thanks for the comments :)

    I’ve seen that Ruby script yeah – he beat me to it ;) I originally planned a PHP script, but I figured that was a big waste of processing – why parse a stylesheet manually when Firefox has a CSS DOM; why parse HTML manually when it has an HTML DOM, and libraries already exist for querying it with CSS selectors. In fact this extension can be used on any kind of markup, not just HTML (for example, try running it on about:config!)

    Re: ignore list – It does have the ability to delete specific selectors; right-click on a selector in the view window and you can delete it from the list. But a wider ignore list would probably be a good idea too, or some way of choosing multiple selectors to delete, or specifying selectors to never include in the first place.

    Re: scan multiple pages – also a a good idea. I plan to add a “spider” capability to the next version that can use either a google sitemap XML file, or an HTML page of links, as the basis for an automated operation. I’ll also be extended the data saving capability so that it can save on a per-host basis, rather than a single global preference.

  • visualweb

    Thanks brother, you’ve salvaged hours from my workday with the little bit of scripting genius.

  • http://www.domedia.org/ junjun

    Very nice James. I deal with legacy CSS on a daily basis, so this will come in very handy.

  • Ikonified

    Sweet deal! I’ll be giving this a shot ASAP.

    James, quick question… How does the plugin deal with things like “dynamic” styles: CSS rules that may not apply until an element has been dynamically added to the DOM (ie: as a result of clicking something or an XHR response)?

    Will the plugin report those rules as “not used” even though they “may” be used?

  • schachin

    when i try to install it says it is a netscape extension and then opens up NS.. any thoughts? thank you!

  • http://www.brothercake.com/ brothercake

    @Ikonified – it should deal okay with anything that was added dynamically before you press the Find button. If something happens and new content is created, then yeah, you’d have to run it again to get that content checked. What if I’ve been toying with is the idea of adding a mutation event to the content document, so that – in combination with the automation setting – it can automatically re-parse the document every time the DOM changes.

    @schachin – er … which version of Firefox do you have? Are you installing via the install link, or downloading the XPI and installing it manually?

  • WarpNacelle

    I like it! I like it a lot! Thank you very much for sharing! :)

  • schachin

    @schachin—er … which version of Firefox do you have? Are you installing via the install link, or downloading the XPI and installing it manually?

    I tried to just click on install and I did a download, but each time when I tried to open it the message said it was for Netscape and then opened netscape.. any ideas on how to get it into my FF? Be an incredibly useful tool for me.. Thank you !

  • Jasper

    I think this app isn’t usefull untill it crawls all of my pages. So looking forward for the next version

  • david_ais

    I love the idea. Unfortunately when I tried to install – Firefox returned the error message:

    “Firefox could not install the file at because: Not a valid install package -207″

  • http://www.deanclatworthy.com Dean C

    This is a fantastic extension. Gave it a try at work today and was very impressed. However, it would be nice if it somehow auto-crawled your site. It’s great for my own personal mini-site but at work we have 100s of pages, and to individually click through them all could take forever.

  • http://www.brothercake.com/ brothercake

    Re: spidering – yeah totally; that functionality is on its way :)

    @david_ais – that sounds like a corrupted install file. ButI just tested it, and it seems okay to me. Can you try again? And if that doesn’t work, download the source ZIP, rename it .xpi, and then drag that on Firefox to install, see if that works?

  • http://www.deanclatworthy.com Dean C

    Great news brothercake. If you need a beta tester fire me a PM on the forums and I’d be more than happy to help!

  • BillyG

    Hi. I’ve tried a few times since it’s release but have been unable to get this installed. At least now I know a few other people have it installed so it must be something my end. Here is a list I keep online of my exts. in case anybody has any idea why this one isn’t installing: http://billy-girlardo.com/My_Firefox_Config.html

    I’d hate to have to re-install FF, but it certainly wouldn’t be the first time…, then again, at least we have that capability vs IE! :-)

  • http://www.stoolball.co.uk Caterwomtious

    Brilliant.

    And another vote for spidering a whole website – that’d make it just about perfect. Multiple <link /> elements within an IE comment would be a useful fix too, as I often have separate screen and print stylesheets within one comment.

  • david_ais

    I’ve retried the install using the download link with the same result. Dragging the decompressed the zip and dragging the resulting folder onto Firefox doesn’t do anything at all. There’s no response on dragging to the application icon, or just displays a file list of dragged to an open Firefox window. I just upgraded Firefox from 2.0.0.4 to 2.0.0.6 but behaviour is still the same.

    I’d really like to be able to install this – it sounds great!. An ideas what the problem might be?

  • all4nerds

    Hello

    Great extension, worked immediately, it only works on external style sheets , not internal style sheets ?
    The only program that I know of that does the same is MS Expression but that is a clumsy 300 Mb that is already 10 years behind time

    Thanks Ben

  • misterrmac

    This is really a great utility but as other have said, it would a lot more useful to me if it was extended to check a whole website.

    Loren

  • Paul O’B

    Good work James I’m sure this will come in very useful.

  • http://www.brothercake.com/ brothercake

    @all4nerds: if by “internal stylesheets” you mean CSS rules inside <style> blocks – no, it doesn’t include them. On a conceptual level this shouldn’t be necessary, because if you’re including CSS that way then almost by definition it only applies to the page it’s being used on, hence there shouldn’t be any redundency. But on a practical level, rules inside a style block can’t reliably be identified between page views; a link stylesheet has a unique URI, but a style block doesn’t.

    Re: install problems – I have no idea what might be causing these issues. I’ll post something in the forums and see if anyone there has a clue.

  • http://www.brothercake.com/ brothercake

    @david_ais: no don’t decompress the ZIP file, leave it compressed and rename it from “.zip” to “.xpi”, then drag that onto Firefox.

  • all4nerds

    Hello

    No i did not mean inline styles, but style sheets still on the page

    look at this big demo and you see what i need it for
    http://home.hetnet.nl/~f2hrekkabparts/index13.htm

  • http://www.brothercake.com/ brothercake

    Like I said, styles inside <style> blocks are not included, for the reasons I mentioned.

  • david_ais

    no don’t decompress the ZIP file, leave it compressed and rename it from “.zip” to “.xpi”, then drag that onto Firefox.

    Successfully installed.

    I’d forgotten that my system had Stuffit’s decompress on rename function turned on which was why the files were decompressed.

    Thanks

  • killerog

    Nice plug-in, it’s a shame it works only for one site and for the next one you have to manually clear the saved data. That makes it just to much steps to use it all the time.

    But keep up the good work!

  • http://www.brothercake.com/ brothercake

    Agreed. The next version will include per-host saving, so that each site has its own data profile.

  • blanchrt

    Hello,

    I’m probably one of the oldest Sitepoint registered users (can’t remember the date, maybe you can check that in your records), from the time when not even yourselves could imagine how far you’d end up in a few years time, since Kevin was modestly preparing the “Build Your Own Database Driven Website…” first edition. Now you have a good selection of books and kits, among the best available in the business and some of which are today the jewels in my shelf.

    It’s always been one of my favorite web design related websites, where I have found good solutions and advice.

    And the reason for all the above is that some weeks ago I needed to shave off a huge stylesheet and thought that it would be nice if there was a tool to identify unused styles, bur couldn’t find any… and, once again, here came Sitepoint to the rescue!!

    I subscribe to all the improvements suggested above and I’m sure that James will do his best to add those that are feasible, but just having started it is THE big step.

    Thanks again.

  • alias

    this is a great tool, the only thing is, it shows many valid styles as being unused but they are being used on other pages,

    this only appears to be good for specific page related CSS not site-wide

  • Anonymous

    Feature request: I would also like to have an inverted list result, that means having used selectors listed. Is that possible? Anyway, thank you so far!

  • johnyboy

    doesn’t work as advertised for me:

    [quote]It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored in your user preferences, so that as you continue to navigate around a site, [b]selectors will be crossed off the list as they’re encountered[/b].[/quote]

    the emboldened part didn’t happen. i went to the home page of a site. a whole load of unused bits of style were listed. one bit of unused style i knew was used on another particular page, so i visited that, but the list remained the same. either i’m not understanding how to use it (if so the above quote paragraph really should be modified) or it doesn’t work. :/ shame, i could really do with a tool that does what this is supposed to.

  • http://www.brothercake.com/ brothercake

    Can you give me some more information – what was the site? What specific content are you referring to that is used but was marked as unused? – so I can have a look myself and try to root out the issue.

  • johnyboy

    i think it’s on any site. to get the plug in to work, i’ve found i need to close the list window and re open it with the find unused selectors button — so the list doesn’t get modified visually, automatically as i travel round a site. i’m using mac os x 10.3.9, firefox 2.0.0.6. it looks like the data is collected and acted on though, just that the window needs closing and reopening — i think.

  • johnyboy

    are you supposed to click the button on every page you want dust me to work on? that seems necessary.

  • http://www.brothercake.com/ brothercake

    If you want it to run automatically you need to turn that option on, in the menu – “Automation > Run at page load”

  • http://www.brothercake.com/ brothercake

    Update for those who are following this thread: there is going to be a Version 2.0 in the near future, incorporating all the features that have been asked for here, and a load of other new stuff to boot.

    Coming very soon :)

  • http://www.domedia.org/ junjun

    James, any chance that this add-on will be submitted to the Mozilla extensions section?
    It would be nice to get automated notifications when there’s an update to Dust-Me Selectors. I just started using for a website we ‘inherited’, I must have shaved off more than 50% of the CSS rules.. this rocks, thanks for helping a ‘brotha’ out ;-D

  • Epibeta

    Maybe I’m missing an important step or something, but Dust-Me seems to just continuously spider a page’s selectors and never stops. Is this proper behavior or should it stop at some point and populate the View Saved Data window?

  • Trenton D. Adams

    You should make a feature where the plugin will allow you to save the modified CSS files to a directory, with all the unused selectors removed. It should keep the basic directory structure that is being used by the web page. That way, the user can just save over top of their project files.

  • http://sitepoint.com Aaron Osteraas

    Hello,

    I’ve fixed this for you, sorry that it was broken!

    Cheers