What tool can analyze my site and report on unused / unneeded CSS?

Question

how can i find in a early way that this css class is being used or not in website ?

like-

style property that i write in my css is being used or not?

and

class or id is being used in webpage?

exe:

.textstyle4{
    font:normal 12px Arial, Helvetica, sans-serif ;
    color:#777;
}

i want to know in my whole website where this css style is being used?

this is an example.

Answer 1

If you want to see what CSS styles are being applied to an element that is being rendered on your browser you should look into using Firefox and Firebug to view the DOM and CSS information.

http://getfirebug.com/

If you are using IE8 you could use the IE8 Developer tools to do the same thing.

Answer 2

The CSS Usage addon for firefox does what I think you are looking for: https://addons.mozilla.org/en-US/firefox/addon/10704/

Answer 3

So you want to be able to do something like click a CSS class and have it find all pages on your site that use that class? Not aware of any such tool, kekekela's answer of CSS Usage is probably about as close as you'll get--which will let you find what CSS an individual page uses.

Answer 4

There's also "Dust-Me", a firefox extension to find unused CSS:

https://addons.mozilla.org/en-US/firefox/addon/5392/

Answer 5

I would be extremely careful using browser-side tools to check for unused css as they don't take server side injection of styles into account (for sure), nor javascript ones (probably...).

Just imagine something like php adding a style only when a certain condition is met or javascript adding a style after a certain action is taken.

Answer 6

Dust-Me https://addons.mozilla.org/en-US/firefox/addon/5392/