View Full Version : How can i see what CSS code, thats in use.

02-03-2012, 02:38 PM

I have a site with a lot of CSS code in the css file, i know thats there is alot thats not in use.
How can i easilly see what CSS code that in use and what isent !?

Is there a program that can scan the site and then show what CSS code thats no ref to !? or just show what CSS elements thats in use.

02-03-2012, 02:41 PM
Yes, get firebug (http://getfirebug.com) and use its inspect option.

02-03-2012, 04:18 PM
Hi. thx alot sir.

ARCLite Studio
02-03-2012, 06:44 PM
I wanted to expand on @abduraooft answer before you got yourself into trouble a bit.

If you get firebug and use the inspect tool on a page it will show you the CSS affecting / in use for the element you are inspecting, HOWEVER, if the entire site shares a CSS file, then a style that is NOT referenced on the page you are inspecting may still be referenced by another page on the site attaching/using that CSS style sheet.

Just wanted to caution you that seeing a CSS style that is not referenced on one page doesn't mean DELETE it, need to be sure its not used elsewhere.

Also, I don't use firebug to it's full potential, so there may be another part of the inspect tool that goes deeper that inspecting a single page/element at a time. So if that is the case then I apologize.

02-03-2012, 07:13 PM
Another really great way to see what CSS is being used by specific elements is to use the "Inspect Element" option in Google Chrome. You just right click and choose that option and it will bring up the HTML code on the left and all of the CSS attributes that are currently being applied to that element on the right.

You'll also be able to see if there is CSS attributes overwriting other attributes using the CSS on the right side, it will have a cross through it if is being called but not applied

02-03-2012, 07:21 PM
There used to be a Firefox extension called "Dust Me Selectors (http://www.sitepoint.com/dustmeselectors/)" that would spider an entire site and report on unused css selectors, but the development does not seem to have been maintained and it doesn't work with the recent Firefox versions.

It's also available for Opera (https://addons.opera.com/en/addons/extensions/details/dust-me-selectors-for-opera/1.0/?display=en), although having just tried it this doesn't seem to work as well spidering a complex site.

The other word of caution about deleting (apparently) unused css selectors is that the elements/classes affected may be created by javascript dynamically, and hence will still not be picked up by spidering all the pages in a sitemap.