Does @import in CSS result in additional http requests?

Question

I have an ecommerce site that has about 8 CSS files linked from the header - resulting in 8 separate http requests to the server. I consolidated all the CSS files into 1 big

Answer 1

The browser has to get the data somehow, so how could it not use another http request? ;-)

It's also possible though, that you'll benefit from browser caching if you're only changing one file and the other seven are unchanged.

You might try sniffing a connection between a client and the server and see what it requests.

Answer 2

If you have a 67 Kb CSS file there is something strange. Remember that the C in CSS is for CASCADING, and this means that you don't have to define in each class all the properties of each one of the tags involved in the class.

For example if you define a <DIV id="maincontainer"> as a container you can define a class to it

#maincontainer {font-face:Arial,helvetica,sans;}

It means that if you create a sub-class of it for the tag <P> like

#maincontainer P {color:darkgray;}

All the <P> tags inside the DIV maincontainer will use font arial, helvetica, sanz.

Also try to create CSS files in order to how them are used in the pages. A unique CSS file for all the site makes to load a lot of classes that are not going to be used in some pages. Divide and conquer.

Answer 3

You can prevent the extra http requests by combining the stylesheets with .htaccess. The technique is explained in the HTML5 Boilerplate .htaccess. It works like this:

In .htaccess:

<FilesMatch "\.combined\.(js|css)$">
    Options +Includes
    SetOutputFilter INCLUDES
</FilesMatch>

In style.combined.css:

<!--#include file="reset.css"-->
<!--#include file="style.css"-->

You can use this to combine .js (or any other extension you put in the parenthesis.)

The documentation for Options +Includes is here.

Answer 4

Yes, a separate request is issued for each @import statement.

You can check this with a quick test; write a fragment of HTML, including a CSS file which imports a second CSS file. Viewing the results in something like Firebug's network panel shows two separate requests for each CSS file. That's the test I used to confirm this answer.

Answer 5

Yeah you will go back to a request per each stylesheet while using @import.

Your best bet is to minify and consolidate the css into a single file for deployment. But you can still develop with seperate files.

Answer 6

CSS imports are not handled any differently than any other "include" on a page, such as a reference to an external JavaScript script. However, browser caching should make this a non-issue except for the first access to your site.