Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am running some speedtests on a blog, and I always get complaints about unused CSS. But this is not CSS that I never use, it is just not used on that particular page.

Now I work in a structured way, but there still has to be some CSS in the file that will not be used, because you need it on another page.

I do not think that using different CSS files on different pages is the way to go, I think you are much better off just creating one big file that can be cached.

Now is there an elegant way of dealing with this, or do you just stick with it.

share|improve this question
add comment

4 Answers 4

up vote 7 down vote accepted

Your assertion that you are better off with one, bigger CSS file is correct. It will likely be only a few KB when gzipped, and should be cached, so not a huge overhead. There are a few things worth checking though.

If some CSS is only ever used on one page, it may be better in that case to put the CSS on the page, in some style tags. (Note: this can make things difficult to maintain, especially when you later decide to use a similar style elsewhere.)

If you take your most popular pages (for example the pages making up 50%+ of your page views) and find that only a very small amount of your CSS is being used on those pages, it may be faster for users to split it into two CSS files. Now, new users visiting your most popular pages have much less to download. On other pages there is one extra HTTP request but that's not a huge deal.

Make sure your CSS is well-optimized. Avoid descendent selectors where possible. If the right hand side of a selector is too generic then it can slow down rendering time. For example .class div {} would be a little slow because the browser has to check every <div> element on the page, then look up the DOM tree to the very top to find (or not) an element with the class.

share|improve this answer
2  
To optimise I would suggest using something like csslint.net –  Toby Nov 9 '11 at 16:37
add comment

I think this is a shortcoming of the speedtest tool that you're using, that it doesn't look at the whole site and see which CSS is never used at all. If you can find a tool that does, let us know!

I think you are much better off just creating one big file that can be cached.

Yes, that makes sense, unless there's a set of pages that need an extra bit of CSS in which case you can include it on those.

share|improve this answer
    
The tool I use is gtmetrix.com. It is an online test that does both Yslow and Page Speed. I do not know if they test the complete site. Yslow does not complain about unused CSS, it is Page Speed that does the complaining. It complains about H3 not being used for example, I do not use this on the frontpage, but I do in other pages. + Another thing is the section for printing in my CSS, that is not used anywhere on the normal website, do you have any recommendations for that. –  Saif Bechan Nov 9 '11 at 10:40
    
The CSS for printing could be used by any page, so you need it just in case. –  paulmorriss Nov 9 '11 at 11:06
    
@SaifBechan if you have the print styles in a separate css you can target the entire file at media="print" - some browsers won't issue the request for that until you actually attempt to print/preview the page. –  Zhaph - Ben Duguid Nov 16 '11 at 11:45
add comment

There’s a handy little Firefox plug-in called Dust-Me Selectors, which checks through your CSS and reports any unused rules. However, it doesn’t work with the latest version of Firefox (v8.0), which is bit of a shame.

P.S.: If I was you, I’d take CSS Lint with a pinch of salt – there’s a school of thought that says that its “recommendations” are pedantic, and just complete overkill. (For more detail, see Matt Wilcox’s persuasive article, CSS Lint is harmful). At best, it is completely unofficial… and, let’s face it, do we really need yet another tool/pseudo-standard to satisfy?

share|improve this answer
    
+1 Thanks I will look into this. I have checked out CSS Lint also, and what you are saying could be true. Lot of the recommendations are complete overkill. –  Saif Bechan Nov 12 '11 at 11:43
add comment

The most optimized and scalable way I can imagine to deal with this consist of :

  1. Making a main CSS file for everything relative to the "global scope" (such as site's design, global classes, libraries, plugins, etc...).

  2. Making a system involving a folder containing one unique CSS file per pages (only if needed). These files could have the same filename as the page it's linked to so you can run a server side script on each page that look for a CSS file in that folder and add it the the page if there is one.

  3. Maybe, making different CSS files for browser specific stuff that you load only when the visitor has the relative browser.

By doing that, you'll end up with an solid and optimized way of separating your CSS. Yep there will still be unused rules in the main file but they will be where they are supposed to be in a logical point of view.

Also keep in mind that those 3 "layers" of CSS files gonna be cached as would be a single CSS file.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.