问题
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.
回答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:
- To identify content to javascript, or mark targets for changing content. This is a must for all but the simplest dynamic pages.
- Likewise, Id's and classes are used by plugins, extensions, spiders, RSS tools, etc.
- As state or status indicators. EG:
<p class="comment highest-rated">... - As easy substitutes for in-page anchors. These allow precisely-targeted hyperlinks without adding elements. Example link.
- As part of good Semantic Markup, which is a best-practice that helps humans and our scripts understand, use, and maintain pages.
- To help with targeting CSS.
回答2:
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.
来源：https://stackoverflow.com/questions/14390183/easiest-way-to-find-missing-css-classes-and-ids