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 one, resulting in a 67kb (!) file - to cut down the http requests to 1 for our css files.

I'm finding this size a CSS file a little unmanageable in light of the fact I'm performing updates on the site constantly. My concern is my users may catch me in the middle of updating and see a NON-styled page when moving from page to page - b/c 67kb still takes a good 2-3 seconds before it is successfully placed on the remote server via FTP.

My question is: does the use of @import within this large CSS file to break up the files into smaller more manageable sizes (within that CSS file) take us back to the original 8 http-requests when the pages is loaded? Or are @imports in CSS handle differently somehow?

Answer 1

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 2

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 3

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 4

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.

Answer 5

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 6

add then as "link href="