Question

Which is a better option: to store CSS on a separate file or on the same page?

Let’s forget the fact that changing the CSS on a file makes it to apply all HTML pages directly. I am using dynamic languages to generate the whole output – so that does not matter.

A few things I can think of:

1. CSS on a separate file generates less bandwidth load.
2. CSS on a separate file needs another HTTP request.

On the other hand, if I compress the data transmission with Zlib, the CSS on the same page should not matter in terms of bandwidth, correct? So, I get one less HTTP request?

Answer 1

If you’re generating HTML dynamically (say, from templates), embedding CSS allows you the opportunity to also generate the CSS dynamically using the same context (data, program state) as you have when you’re producing the HTML, rather than having to set that same context up again on a subsequent request to generate the CSS.

For example, consider a page that uses one of several hundred images for a background, depending on some state that’s expensive to compute. You could

1. List all of the several hundred images in rules in a seperate, static CSS file, then generate a corresponding class name in your dynamic HTML, or
2. Generate the HTML with a single class name, then on a subsequent request generate CSS with a rule for that name that uses the desired image, or
3. Do (2), but generate the CSS embedded in the HTML in a single request

(1) avoids redoing the expensive state computation, but takes a larger hit on traffic (more packets to move a much larger CSS file). (2) Does the state calculation twice, but serves up a smaller CSS file. Only (3) does the state calculation once and serves the result in a single HTTP request.