How Should CSS3 Media Queries be Managed?

Question

Since there are many ways to implement CSS3 Media Queries into a website, I would like to know which one is recommended by more experienced web designers. I can think of a couple:

1. All in one Stylesheet

There is a default style which applies to all screen widths, and media queries that apply only to lower screen widths and overwrite the default, all in one file. For example:

HTML

main.css

article
{
    width: 1000px;    
}

@media only screen and (max-width: 1000px)
{
    article
    {
        width: 700px;
    }

}

(please keep in mind that this is just an example)

Pros:

Default style applies to older browsers
Only one HTTP request required

Cons:

Gets messy with a lot of code
Some browsers will have to download code that they won't apply

2. Separate Stylesheets

There are separate stylesheets containing full code tailored for each screen width. Browsers only load the one that applies. For example:

HTML

 /*Also older browsers*/

large-screen.css

article
{
    width: 1000px;
}

small-screen.css

article
{
    width: 700px;
}

Pros:

Neat and organized
Only one HTTP request required
Browsers only load what they need

Cons:

(This is why I'm hesitant to use this:) When one makes a change that applies to all screen widths, the change has to be copied and pasted to the appropriate spots in all of the stylesheets.

3. Separate Stylesheets, one Global Stylesheet

The same as #1, but the global style and the media queries are in separate stylesheets. For example:

HTML

main.css

article
{
    width: 1000px;
}

small-screen.css

article
{
    width: 700px;
}

Pros:

Also neat and managable
Does not have problem of #2 when making global changes
Global style applies to older browsers

Cons:

Smaller screen-widths require 2 HTTP requests

That's all I can think of. How should media queries be managed?

Thanks for any responses.

How Should CSS3 Media Queries be Managed?

1. All in one Stylesheet

2. Separate Stylesheets

3. Separate Stylesheets, one Global Stylesheet

3 Answers