Managing multiple CSS files with @import

Finding the most bandwidth-efficient solution

[Winedark]

I currently have four css files for each of my pages: three screen stylesheets (which offer information in the same layout but with different color schemes) for use in conjunction with a styleswitcher, and a print-only stylesheet.

The three screen stylesheets are large-ish (12k+ each) and for the most part contain the same information.

I've been thinking about adding a fifth stylesheet. screen.css, linked to each of the screen stylesheets using @import, in order to consolidate the common screen formatting into one place. Then the three other css files could just contain color/background information and would be less than 4k in size each.

However I've heard that it's faster for users on dialup connections to download a single large css file than it is to download separate smaller ones.

Which is the most user-friendly method? Three stylesheets which are self-contained but large and redundant, or four stylesheets which are much smaller?

[BlobFisk]

I tend to opt for smaller stylesheets. 1 common sheet, and then one or more for different purposes (print, page specific stuff etc.).

User-Friendly? Not too sure. Download speed is a concern, more files more http requests - but if your CSS is well written and you design is light, then it should all balance out.

[drbrain]

Multiple file speed loss is also reduced by having a browser and server that support persistent connections (I believe that even IE5 map support this). You elimine the round-trip TCP connect time for every HTTP request, and avoid the slow-start algorithm

See this paper: Network Performance Effects of HTTP/1.1, CSS1, and PNG [w3.org]