easiest way to find missing css classes and ids

Question

How can I identify css classes or ids that are referenced in code but missing in the css file? Is there any feature in firebug that i can use?

Thanks.

Answer 1

Firebug does not do this, nor any tool I can think of, because it is not a common or high-payback task.

However, it is a common task to find unused CSS rules, so that they can be trimmed. You can get a performance gain by trimming common CSS files. But removing ID's and classes from HTML pages does not help as much, and is more likely to break something (see below).

A good/common Firefox add-on for finding unused CSS rules, is Dust-Me Selectors. If you really want a tool to find ID's and classes that don't have CSS rules, you could probably take that add-on's source code as a good starting point for making your own Firefox extension.

---

Removing ID's and classes, just because they don't have a CSS rule is not a good idea and could break things.
ID's and classes can be in a page for a variety of reasons, not just as convenient handles for CSS.

Here are some reasons why an ID or class might be in a page:

1. To identify content to javascript, or mark targets for changing content. This is a must for all but the simplest dynamic pages.
2. Likewise, Id's and classes are used by plugins, extensions, spiders, RSS tools, etc.
3. As state or status indicators. EG: <p class="comment highest-rated">...
4. As easy substitutes for in-page anchors. These allow precisely-targeted hyperlinks without adding elements.   Example link.
5. As part of good Semantic Markup, which is a best-practice that helps humans and our scripts understand, use, and maintain pages.
6. To help with targeting CSS.

Answer 2

You may find the question answered at this link useful, Javascript can be used to search for classes. Although, it may be useful to find the classes not used by CSS, beware of removing classes that may be necessary for other reasons (as others have pointed out).

Answer 3

Visual Studio, with the ReSharper plugin does this. It shows each missing class with a blue waved underline.

I am not sure which versions of what, but I use

• Visual Studio 2013 Premium
• ReSharper Version 8.2.3

Other versions might do as well.