Is there a way to identify orphaned classes in a web app built with HTML, JavaScript, and CSS?

Question

I have been trying to delve into web development. Part of this process has been incrementally tweaking things on my website, trying to learn something new with each incremental change.

The problem I'm running into with this is that as the website evolves, I end up doing away with and adding new classes to my HTML elements. Obviously, when I create these selectors in my HTML, I target them in my JavaScript or my CSS, but I often end up going back and doing away with elements. This leaves orphaned references to these selectors in my JavaScript and my CSS, as well as unnecessary/unreferenced classes and ids in the HTML.

My question is is there some utility that I can use to identify these orphaned selectors both in my CSS, HTML, and JavaScript* so that I can safely clean up these files? The solutions suggested so far are great for finding unnecessary selectors in my CSS, but don't seem to help with identifying unnecessary classes or IDs in my HTML, which is also something I'd like to do. Is there something that works both ways as described?

*It sounds like for JavaScript/JQuery there are methods, but for my purposes, my JavaScript is clean enough that I can clean it without help, so its fine if the focus is on CSS and HTML.

Answer 1

For CSS there is a Firefox extension that finds unused CSS selectors on a page. It has an option to spider the whole site. Version 3.01 should work with newer versions of Firefox.

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

And here's another option.

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

for Javascript you are pretty much on your own. If you are using jquery you can override the $() function calling jQuery() inside that function and checking / loging the value returned from jQuery to ensure all selectors are returning some results. But its not a deterministic way of doing things.