CODEWITHSUNDEEP
phphtmlcssoptimization
Gershom Maes
Gershom Maes

Reputation: 8170

Embedded vs referenced css

Quick question - I'm writing an html/php simplification framework to make common html tasks easier. One thing I want to simplify is the inclusion of the correct css stylesheets. Certain parts of a site may need a particular set of stylesheets in order to render correctly, and certain other parts may need other stylesheets. I want the user to be able to specify css "dependencies" for various parts of the site, and the correct stylesheets are loaded when the dependencies are present. This is already taken care of, and is just a background for the actual question.

So here's the actual question:

I'm just realizing I may as well get the file-contents of the css file, and output them directly in the head element of the html document like so:

<style type="text/css">
    ---The concatenated contents of every css file the current page depends on---
</style>

Instead of a list like this:

<link rel="stylesheet" type="text/css" href="---link to the 1st css dependency---"/>
<link rel="stylesheet" type="text/css" href="---link to the 2nd css dependency---"/>
<link rel="stylesheet" type="text/css" href="---link to the 3rd css dependency---"/>
.
.
.

Is this a good idea? What are the upsides/downsides of each approach? Doesn't the browser need to perform a separate http request for each included file? Is this outweighed by the cost of sending one potentially very large file, containing all the css code?

Thanks for any advice!

Upvotes: 2

Views: 65

Answers (1)

Gil
Gil

Reputation: 1804

Unless specified otherwise, a browser will choose a locally cached css file instead of loading it again from the server. So most of the time only the html file will be transferred. This is one of the reason I myself prefer to call an external css file instead of embedding it as a tag element.

Another good reason is that when you separate the files it's much easier to edit/update.

Plus, external files remove the need to duplicate styles from one file to another.

Bottom line, most of the time a linked css file will be a much better choice.

Upvotes: 2

Related Questions