Find style references that don't exist

Question

Is there a tool that will find for me all the css classes that I am referencing in my HTML that don't actually exist?

ie. if I have <ul class="topnav" /> in my HTML and the topnav class doesn't exist in any of the referenced CSS files.

This is similar to SO#33242, which asks how to find unused CSS styles. This isn't a duplicate, as that question asks which CSS classes are not used. This is the opposite problem.

This is a duplicate of SO#33242 http://stackoverflow.com/questions/33242/how-can-i-find-unused-images-and-css-styles-in-a-website — Jon Galloway, Sep 17 '08 at 02:31
Reopened. Sorry - I hadn't realized that you were asking the reverse of that other question. — Jon Galloway, Sep 17 '08 at 03:14
They're both valid questions, but they could possibly be merged if they were worded a bit differently, since they are both aspects of the same issue. Just a thought :) — Sam Murray-Sutton, Sep 17 '08 at 11:03
This is an exact duplicate thread to this one: http://stackoverflow.com/questions/135657/tool-to-identify-unused-css-definitions — David Hobs, Sep 07 '11 at 06:33
@DavidHobs No it isn't. This is the opposite question to the one you referenced. — Deeksy, Sep 07 '11 at 23:01

score 4 · Accepted Answer · answered Sep 17 '08 at 02:48

You can put this JavaScript in the page that can perform this task for you:

function forItems(a, f) {
  for (var i = 0; i < a.length; i++) f(a.item(i))
}

function classExists(className) {
  var pattern = new RegExp('\\.' + className + '\\b'), found = false

  try {
    forItems(document.styleSheets, function(ss) {
      // decompose only screen stylesheets
      if (!ss.media.length || /\b(all|screen)\b/.test(ss.media.mediaText))
        forItems(ss.cssRules, function(r) {
          // ignore rules other than style rules
          if (r.type == CSSRule.STYLE_RULE && r.selectorText.match(pattern)) {
            found = true
            throw "found"
          }
        })
    })
  } catch(e) {}


  return found
}

great code snippet! I just grabbed this to help me find CSS classes referenced that don't exist. Of course the trouble is that sometimes the class attribute is "overloaded" to provide a JavaScript hook ;-) but now I can at least see which ones have no styling applied. Awesome! — scunliffe, Feb 08 '10 at 20:15

score 1 · Answer 2 · answered Sep 17 '08 at 02:31

1

Error Console in Firefox. Although, it gives all CSS errors, so you have to read through it.

answered Sep 17 '08 at 02:31

Milan Babuškov

59,775
49
126
179

score 0 · Answer 3 · answered Sep 17 '08 at 02:33

0

IntelliJ Idea tool does that as well.

answered Sep 17 '08 at 02:33

Swati

50,291
4
36
53

score 0 · Answer 4 · edited Apr 02 '13 at 15:39

0

This Firefox extension is does exactly what you want.

It locates all unused selectors.

edited Apr 02 '13 at 15:39

JSW189

6,267
11
44
72

answered Sep 18 '08 at 22:29

Buzz

1,616
3
18
25

1

This is not the problem I'm trying to solve, I want to find all class attributes in the HTML that don't correspond to class names in the CSS. – Deeksy Sep 22 '08 at 23:58
Agree with @Deeksy - I too grabbed dustmeselectors once... but it would flag stuff that was defined, but used elsewhere on my site. Thus you need to aggregate a bunch of data from multiple pages to ensure you truly have a "dead" selector. @mislav's answer is bang on. – scunliffe Feb 08 '10 at 20:17

Find style references that don't exist

4 Answers4