Is there an official/recommended way to organize CSS files for a responsive theme? While creating a responsive theme (eg. a bootstrap based sub-theme) is there an official/recommended way to organize CSS files for different media queries? In general I put everything into one CSS file.

1. All In One

mytheme.info:

...
stylesheets[all][] = css/style.css
...



style.css:

body { ... }

p { ... }

...

@media (max-width: 767px) {
...
}

@media (min-width: 1024px) {
...
}




2. Separated CSS Files

mytheme.info:

stylesheets[all][] = css/style.css
stylesheets[all][] = css/480.css
stylesheets[all][] = css/720.css
stylesheets[all][] = css/960.css



style.css, 480.css, 720.css ...



3. Separate CSS Files for Each Media Query Defined in .info File

mytheme.info:

stylesheets[all][] = css/style.css
stylesheets[all and (min-width: 480px)][] = css/480.css
stylesheets[all and (min-width: 720px)][] = css/720.css
stylesheets[all and (min-width: 960px)][] = css/960.css



style.css, 480.css, 720.css ...



4. Other?

I wonder what is the recommended way for this or it doesn't matter (structural, performance wise etc).
This is possibly hard to answer. But all the way are acceptable. 

Mostly people don't like reading through a single HUGE CSS file, and maintaining it is very difficult. On the other hand, splitting it out causes extra http requests which could potentially slow things down.

My opinion would be one of two things:


If you know that your CSS will NEVER change once you've built it, I'd build multiple CSS files in the development stage (for readability), and then manually combine them before going live (to reduce http requests).
If you know that you're going to change your CSS once in a while, and need to keep it readable, I would build separate files and use code (providing you're using some sort of programming language) to combine them at build time (runtime minification/combination is a resource pig).


With either option I would highly recommend caching on the client side in order to further reduce http requests.

I also found another question related to this https://stackoverflow.com/questions/16657159/when-using-media-queries-does-a-phone-load-non-relevent-queries-and-images . This will further clear your concept about this.