Big CSS Files or Many HTTP?

[lordvader]

Hi All,

Is it better (more efficient/faster) to have one huge CSS file (and therefore only one HTTP request on doc load), or many CSS files (each one very small, but more HTTP requests)?

Does it matter?

[blue-eye-labs]

I've never really thought about it like that but i find it easier to edit multiple files.

[lordvader]

I tend to use multiple files too for easier maintenance, but then I learned that each file linked to using <link> or <script> tags in the head of the page results in a seperate HTTP request...

So then I thought would making, say 7 HTTP requests, be faster or slower than loading one, say 30Kb, CSS file?

Maybe it would depend on the number of visitors to the page, or the hardware spec of the server? I don't know, but I sure would like to find out

[WebJoel]

Your CSS total, -of properly optimized, should only be about 10-15% of the size of the HTML. I prefer one all-encompassing CSS file, but understand the need to maybe have a second (or more) external file that maybe only serves a certain browser-type, or media-type ("print" vs. "screen" or "all"). This media="print" being for special rules for print-out pages. The coding is somewhat different for print-out and if only one HTML page of a 10-page site has or needs to ability to be printed-out, it is probably best to not include that part of the CSS in the 'main.css' but instead, make a second external CSS file named name maybe "print.css" that is only referanced on the page that requires print-outs.

But even if a site has a dozen external CSS files, -it only slows the first page because, once first-page is loaded, it is in the user's CACHE and those files aren't HTTP'd again for that session, thus saving time in subsequent page-loads. -There are pros & cons to both views really.

[drhowarddrfine]

Making multiple http requests will always be slower than one file. Think of how long the round trip for each request may be compared to how fast the download is. Each request may take 200ms more or less.

[ray326]

If your intent is totally decreased load time then the CSS should be embedded in the page the browser receives. It takes a very large external style sheet to offset the request time. Note that the form of the page on the server and response seen by the browser are totally separate things so maintaining separate stylesheets on the server is no problem.