Single CSS file for all @media vs separate CSS file for each @media

If I have all media types in single CSS file, for example

the below is a content of style.css

@media only screen and (min-width: 480px) {
  /* Style adjust开发者_如何转开发ments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

@media print {
 /* Style adjustments for Print go here */
}

Will browser download download the CSS part of @media only screen and (min-width: 480px) and @media print if I open the file on a device which has min-width: 768px?

or browser will download whole css on the device even if it will be never used on same device. For example the devices which has maximum width of 480px in both orientation will never need the CSS code of written for the device with greater then 480px width or height even if the CSS is cached. it will be no use?

Is using separate CSS file for each media best for performance?

Which can increase the performance, HTTP request or a separate and only required code needed for device?

Seeing as the total size will be roughly the same, but you increase your requests number from 1 to 3, I'd suggest you put them all in a single file.

The browser will download the full size of all 3 CSS files anyway.

Mobile Boilerplate puts them all in the same CSS file http://html5boilerplate.com/mobile but I've seen other responsive designs use multiple files.

I guess one of the questions is how much is there in-common/different between the differing resolutions?

A single file may be easier to manage and much extra size might be overcome by ensure it's served out with gzip on.

You've not used max-width in the above example so the styles for 480px will also be used for 768px (unless over ridden) - is this what you intended?

It is better to put all your CSS code to one file. If you are using media queries inside to CSS file tag, most of the browsers will load all CSS files. I have tested it in Chrome, FF, IE. The more CSS files you load, the more HTTP requests you have.

In my opinion the only situation when you would want to use separate CSS file, would be CSS for IE browsers (not only) with use of these html tags (example):

<!--[if lt IE 7 ]> <link rel="stylesheet" href="ie7.css" /> <![endif]-->

Here you are still use another HTTP request, by assuming that user will use IE7 on broadband or WiFi connection, it won't hurt your user so much.

Using @import in main CSS file to load other files will also require more HTTP requests.

The good practice is to have well organize CSS code, so you don't repeat styling for the same classes/IDs.

If you have very complicated CSS code, you can use tools like SASS or LESS, or you can always minify your CSS code using CSS Compressor or Minify CSS.

If you can try to only include the required *.css files in the page by checking for user-agent.

This will give users the required downloads only and be the most efficient in your case. Remember to give one file to every "media" you have.