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?
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.