Search code examples
cssfirefoxfirebug

easiest way to find missing css classes and ids

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.

Solution

  • 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.