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

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.