homepage Welcome to WebmasterWorld Guest from 54.145.182.50
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to identify redundant CSS
Finding CSS that's not used by a site
nubbin

10+ Year Member



 
Msg#: 4583566 posted 7:28 pm on Jun 12, 2013 (gmt 0)

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

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month



 
Msg#: 4583566 posted 9:10 pm on Jun 12, 2013 (gmt 0)

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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4583566 posted 9:44 pm on Jun 12, 2013 (gmt 0)

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

5+ Year Member



 
Msg#: 4583566 posted 9:59 pm on Jun 12, 2013 (gmt 0)

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

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4583566 posted 10:49 pm on Jun 12, 2013 (gmt 0)

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

WebmasterWorld Administrator phranque us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 4583566 posted 11:14 pm on Jun 12, 2013 (gmt 0)

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

10+ Year Member



 
Msg#: 4583566 posted 12:06 am on Jun 13, 2013 (gmt 0)

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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4583566 posted 12:31 am on Jun 13, 2013 (gmt 0)

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

5+ Year Member



 
Msg#: 4583566 posted 1:49 am on Jun 13, 2013 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4583566 posted 3:11 am on Jun 13, 2013 (gmt 0)

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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4583566 posted 4:17 am on Jun 13, 2013 (gmt 0)

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

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4583566 posted 4:07 pm on Jun 13, 2013 (gmt 0)

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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4583566 posted 6:01 pm on Jun 13, 2013 (gmt 0)

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

5+ Year Member



 
Msg#: 4583566 posted 1:48 am on Jun 14, 2013 (gmt 0)

@DrDoc Ooh thanks for that :)

ergophobe

WebmasterWorld Administrator ergophobe us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4583566 posted 11:12 pm on Jun 22, 2013 (gmt 0)

@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



 
Msg#: 4583566 posted 5:36 pm on Jun 23, 2013 (gmt 0)

run it through the CSS validator


Agreed - What would Tidy do...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved