How to identify redundant CSS

Finding CSS that's not used by a site

[nubbin]

Hi,
Is there an easy way to identify CSS that is not used anywhere in a site?
I have quite a large site with a CSS file that is about 250 lines long.
Some of that CSS I wrote a long time ago when I really didn't know what I was doing. I suspect some of it may no longer be used. I often waste time thinking "what is that for" when I look at bits of the CSS file.
I suppose I could use "Find" in Dreamweaver to search for CSS names across my whole site. If not found, assume they are redundant. This would be time consuming and perhaps cause bugs.

Is there a tool that can automatically search across a given set of pages and tell me which CSS is not used anywhere?


Thanks

[not2easy]

250 lines is not terribly long for a large site. It sounds like more trouble than it is worth. Many of my smaller sites have over 500 lines. Eliminating a few unused lines won't significantly change anything.

[lucy24]

It depends on how many pages your average visitor hits. My initial reaction was the same: 250 lines is nothing. Then I took a quick look at my own sharedstyles.css (used by almost all pages in addition to directory-specific stylesheets). It's pretty exactly half that length, weighing in at 4.6k. That's already bigger than some of the pages it belongs to, before even throwing in the directory stylesheet which tends to be bigger. So it's worth it if your visitors hit multiple pages-- but if they tend to be in-and-out, one page, bounce, question answered on the first hit, you might be better off with in-page styles.

On the other hand-- back to your original question-- you'd want to keep some unused styles just in case you want to use them later. For example, I don't think I currently have a single <h6> anywhere on my entire site, but I'm not about to delete it from the CSS!

[jinxed]

Why wouldn't you delete it if its not being referenced from anywhere?

[DrDoc]

Main reason -- caching.

I always set up my CSS to handle ALL elements I MAY use (address, blockquote, code, h1-h6, tt, etc.).

I also always set up my CSS to handle basic common scenarios, classes, that can be applied to any element (float: left/right, clear: left/right/both, text-align: left/center/right, margin: 0 auto).

It's much "cheaper" to have all your basics covered than to add them later.

As to the original question -- 250 lines is nothing. I have a site where my "optimized" stylesheet weighs in just under 1000 lines.

If you name things right, and if you design your CSS with inheritance in mind, you'll know whether something is used or not. Certainly, if you re-style (or remove) a particular element/section/widget -- remove unnecessary rules then as needed. Otherwise there should be very little reason (except complete redesign) to revisit and "prune".

[phranque]

google page speed used to report unused css on a page-by-page basis.
it looks like they dropped that feature but perhaps if you have an older version of the plugin.
the chrome browser has this feature in the development tools.


as far as reducing the "weight" of css you should also consider minifying the code, using gzip compression where acceptable, and configuring your server to provide the proper HTTP Response headers to support browser and proxy caching properly.

[nubbin]

Thanks for your replies.
My main reason for wanting to clean it up is that is confusing to read and decide which CSS to use and some of my old CSS is suspiciously puzzling!.

I like DrDocs approach. This is the kind of thinking I will use on future sites. Regrettably I did not have his knowledge or foresight when I started using CSS!

I am tidying up my site as I want to make it responsive. This will be easier and less bug prone if I know what CSS is actually being used.

The background situation:
10,000+ page site built over 10 years. Desired visitors visit multiple pages. I'm getting rid of all inline styling as that'll make it easier to change to a responsive design

Google Developer tools checks which CSS is used on a page, but doesn't seem to do it for a set of pages so is not really a help. [In case anyone's reading this and wonders how to do this, in Chrome hit ctrl-shift-I to open developer tools. Select Audits, tick Web Page Performance then run the audit to get a report including unused CSS].

I'm surprised there isn't a tool that will automate this tedious chore :-)

[lucy24]

There are plenty of tools that check for unused CSS within a single document. A site-wide check is tricky-- in both directions. ("Oh, ###, all this time it's been using my browser's generic <li> style when I could swear I had a ream of stuff that was specific to 'ul.options li'".)

But, hey, as long as you've got the file open, why not run it through the CSS validator? If it yaps at something whose name you recognize, that's when it's cleanup time.

[Setek]

I have no idea how to do it for generic (e.g. ul li) rules, but for classes and IDs, I normally ...

1. Use a site-wide search, Sublime Text can do searches by entire "Projects".
2. Use regex, like:

class="([^"]*)used-class([^"]*)"

-- this is searching for any instance where class contains 'used-class', with or without other classes etc. on either side.
3. Swap out all instances of this class for some other class, like:

class="$1new-class$2"

4. Change my

.used-class

to contain :before code saying "This class is deprecated, please use .new-class" with a nice big red error box. Just in case I see it somewhere that I missed. Or if someone tries to use it.

But this method doesn't work very well on a live site--you could spark all kinds of errors. I only do this for sites still in the works, so any errors can be picked up and dealt with, before going live.

[smallcompany]

Here are a few in case you want to see how many are not used:

[meeech.amihod.com...]

[addons.mozilla.org...]

[unused-css.com...]

[lucy24]

If you want to try the above, note that unused-css dot com crawls from 88.191.184.xyz-- a range you may normally have blocked-- with a humanoid UA.

[DrDoc]

Use regex, like: class="([^"]*)used-class([^"]*)" -- this is searching for any instance where class contains 'used-class', with or without other classes etc. on either side

If I may just amend that, in case you have a class name like

misused-class

:

class="([^"]* |)used-class(| [^"]*)"

[lucy24]

When I'm doing the equivalent test in e-books, the pattern goes-- category by category--

(<div class = "(?:\w+ )*|\bdiv\.)(?!AAA|BBB)

where AAA, BBB etc. are classes to be excluded. With or without trailing " depending on whether I need to remain alert for compound classes. If you use hyphens in class names it would of course have to be [\w-]+ instead.

[Setek]

@DrDoc Ooh thanks for that :)

[ergophobe]

@smallcompany - thanks for that last reference.

I've tried the others, but I couldn't get Dustme to work and have been thinking of building my own tool, but it's not simple - the tool has to understand the DOM in order to know whether or not a rule applies. It looks like the unused-css tool does just that (and lists some other tools and compares what each one does).

[dougwilson]

run it through the CSS validator

Agreed - What would Tidy do...