CSS and performance

Each should be a separate style sheet - Something about @import statements basicly opens new requests for the server which is a performance issue.

Well directly linking them makes request to servers as well. So from that point of view, it makes absolutely no difference.

The difference however is, that when you link them directly they will be downloaded in the same order as they are specified. Whereas when using @import there is no way to know in what order they will download. This might cause unstyled content flashes and various other issues.

There is a big difference in how they get loaded if you use a <link> tag in the index.html file and then use @import in that stylesheet. I can't remember the specifics; let me look around for the report. The issue is in what order the browser downloads all the resources. There are a few different ways to link them all up, and I remember the one that you describe is the worst because it blocks all the imported ones until way too late in the process. Let me see if I can dig that up.

Well I meant no difference as in they all still cause and HTTP request.

I do realise that there is difference in how they are handled, I mention it in the post.

And if it the report I am thinking about that you talk, he actually is against using @import at all :)

In general to improve your download times with CSS:

• Use SASS to combine all of your stylesheets into one, to minimize HTTP requests
• don't use @import on high performance sites
• minify your CSS

@Vytautas, I didn't see your reply! I must have started writing mine before you published yours. Sorry about that.

That second link from James is the report I mentioned:

• don't use @import

As others have suggested, there are a lot of factors:

• The number of HTTP requests
• The total download size
• The order in which they get downloaded
• How fast the server is

You will get the best results by combining all the CSS into one file, minifying it, including it with one <link> tag, and putting it on a CDN.