Today I saw this blog post on reddit. It's something that crossed my mind at some point in my life, but I never tried to do it. Aaron implemented it using PHP, but I think it could be fairly easy to implement it in JavaScript. However, I'll keep that for another post.

Finding incompatibilities in CSS can be useful, but I think of another thing for which there is no ready made solutions available is finding which selectors are not used.

Usually StyleSheets just grow with time. Of course we try to keep it clean and remove unused code blocks as they are deprecated, but there's always those on which you stop and ask yourself "do I still use that ?" and you don't touch it just to be sure.

The basic concept with jQuery is pretty straight foreward since jQuery works with CSS selector:

$.each(document.styleSheets[0].cssRules, function() { 
    if ($(this.selectorText).length < 1) { 
        console.log('Unused: %s', this.selectorText);
    } 
});

It didn't take too long before I started to draft in my mind a jQuery plugin idea which would allow to "debug" and optimize CSS.

However I came to the conclusion that it was not such a great idea, it should instead be a Firebug feature.

So John, here's my wish list for Christmas (behold my limited Gimp skills):

• Display unused selector blocks grayed
• Display non-standard selector another color