How to go about unused CSS issues

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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?

Answer 4

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.