The easiest way to find missing css classes and ids

How can I define css classes or identifiers that are listed in the code but missing from the css file? Is there a function in firebug that I can use?

Thanks.

+7
source share
2 answers

Firebug does not do this, nor a tool that I can think of, because this is not an ordinary or highly paid task.

but It is a common task to find unused CSS rules so that they can be truncated. You can get performance gains by trimming common CSS files. But removing identifiers and classes from HTML pages does not help, and most likely something will break (see below).

A good / common Firefox add-on for finding unused CSS rules, Dust-Me Selectors . If you really want the tool to find IDs and classes that do not have CSS rules, you can probably take this additional code as a good starting point for creating your own Firefox extension.


Removing an identifier and classes just because they don’t have a CSS rule is not a good idea and may break the job.
IDs and classes can be on the page for various reasons, and not just as handy CSS handles.

Here are a few reasons an identifier or class might be on a page:

  • To define content for javascript or mark targets for modifying content. This is necessary for everyone except the simplest dynamic pages.
  • Similarly, identifiers and classes are used by plugins, extensions, spiders, RSS tools, etc.
  • As indicators of status or status. EG: <p class="comment highest-rated">...
  • Easily replaces inline snaps. They allow you to accurately orient hyperlinks without adding elements. Link example.
  • As part of the good Semantic Markup , which is the best practice that helps people and our scripts understand, use and maintain pages.
  • To target CSS.
+4
source

Visual Studio, with the ReSharper plugin, does this. It shows each missing class with an underlined blue mask.

I'm not sure which versions of what, but I'm using

  • Visual Studio 2013 Premium
  • ReSharper Version 8.2.3

Other versions may also work.

0
source

All Articles