13

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.

dot
  • 14,928
  • 41
  • 110
  • 218
  • 4
    this is a tricky problem; keep in mind that classes and ids aren't only used for CSS! i use plenty of both that are only intended for javascript to use – Eevee Jan 18 '13 at 00:30

3 Answers3

8

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.
Community
  • 1
  • 1
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • 1
    Finding missing CSS classes can sometimes be a high payback task. Consider this: part of trimming down unused classes can be deleting whole CSS files instead of sorting through each class and seeing if it's used among all pages in your site. The author of the question probably wants to delete CSS files that seem unused, and check to see if any classes are actually being called anywhere on the site. Those unused CSS finders are great for a single page, but that CSS might be used on another page in your site so be careful. – SpaceNinja Jun 05 '14 at 20:19
1

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.

Marcel
  • 15,039
  • 20
  • 92
  • 150
1

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

Dev.Rinse.Repeat
  • 11
  • 4