CSS file size / file splitting

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

CSS file size / file splitting

Post by Stryks »

I have a site I'm designing with a single CSS file of around 8k. Mostly this is generic site-wide stuff (header / footer, boxes etc) but there are some page specific styles in there as well.

The main page of my site is a 3 column design, while later pages are single column with different layout elements specific to those pages (eg. search results).

Given this, if I keep all the CSS in one file, then there will be a large amount of unused style information loaded with each page.

I realise that for the most part, the file will get cached and so size will only be an issue on the initial load, but I'm wondering if I should be splitting the CSS file into 1 generic one and a series of page specific ones.

Perhaps this is only needed over a certain size .... and if so, any guesses to that threshold?

Cheers
User avatar
wtf
Forum Contributor
Posts: 331
Joined: Thu Nov 03, 2005 5:27 pm

Post by wtf »

I would not worry about 8k css... spend time optimizing the query or block of code
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Post by Stryks »

Thanks for the response. I'm not really concerned about it just now .... 8k is pretty much nothing.

But yeah ... 8k is the core stuff and per-page items for just 2 pages. I mean, alot of it will be reused the more pages I do, but still ... if I keep on going the way I am, I can see the file getting up to ... maybe 30 - 40k. Maybe bigger.

I'm just not sure if the best bet is to keep it all as one and rely on caching, or to take the plunge early on and split it all out to save the hassle later when it gets to this size.

What would be faster at the end of the day anyhow? Loading 2 style sheets per page (first cached and the second loaded) with each page needing at least one load, or just get it down with the first page view and let the thing roll around the site from cache.

Cheers
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

From what I know an important bottleneck for a pageload is the amount of requests needed. So in that case you'd better use one stylesheet. It's the same with images used for a navbar for example. Better to construct one big one with all states in it, then a few smaller ones for each button.

But to be honest, I think there are other more important arguments to choose for one or more sheets. It's more a matter of organisation and what works best for you and your site. If it's a HUGE site with many many sections and to keep it all in one sheet would become a nightmare to work with: then I would split it up. Otherwise just keep it in one.

One other thing I've been doing lately is writing css rules on 1 line. Makes it a lot easier to find the specific rule you are looking for, and saves a few bites (lot less whitespace). But that's a personal preference.
Post Reply