CODEWITHSUNDEEP
htmlcss
Astro
Astro

Reputation: 614

How to display all classes that have no definitions in CSS files?

Is there a tool to display/highlight all elements which have certain classes defined, but there are no css rules for this classes defined in css files?

For example I have html code like:

...
<div class="class_one">Some text for class one</div>
<div class="class_two">Some text for class two obviously</div>
...

And in .css files we have:

...
.class_one {
    color: red;
}
.class_three {
    color: magenta;
}
...

In this case, if need to know all classes with no definitions inside css, I should get that "there are no class definitions for class_two". Also I should point that this tool (or whatever) shouldn't be online since I do my projects using local LAMP bundle (MAMP Pro, in my case).

I hope my english isn't so bad :)

Upvotes: 0

Views: 262

Answers (3)

povilasp
povilasp

Reputation: 2396

The only OOTB solution I have came across is this one: http://unused-css.com/

Though it has limitations, obviously the site has to be online. But the main idea is clearly described in the schematics over in that site. You need:

  1. Collect all used classes/ids in HTML/JavaScript
  2. Collect all defined selectors in CSS
  3. Cross both lists and see what is left

Although that seems like a straightforward task, sometimes there is a different CSS for every page, or the CSS is rendered dynamically, etc.

Edit:

To collect all the ids and classes I would run these regexps on files:

<(.*)class="(.*)"(.*)>
<(.*)id="(.*)"(.*)>

(Tested on http://regexpal.com/)

With notepad++ (or anything else that can come in handy while searching for patterns), I would collect the total set of items that are present in my HTML (possibly modify it for javascript too). Then I would collect the matched CSS classes into one regexp and match it against my CSS to see what's missing.

Upvotes: 2

Ishan Jain
Ishan Jain

Reputation: 8171

you can use jquery plugin like-

http://csslint.net/about.html

OR you can also enter your css and found errors and warnings.-

http://csslint.net/index.html

Upvotes: 0

Zeta
Zeta

Reputation: 105885

How to display all classes that have no definitions in CSS files?

This is quite easy: parse all html elements, and populate a list with all entries of the class attribute. After this, parse the CSS and populate a second list. Remove all entries of the CSS list from the first list and you have your classes without CSS declaration.

Note that this gets much more complicated if you use dynamically created class names with JavaScript.

Is there a tool to display/highlight all elements which have certain classes defined, but there are no css rules for this classes defined in css files?

Haven't heard of any tool yet.

Upvotes: 0

Related Questions