How Should CSS3 Media Queries be Managed in Stylesheets?
===

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**

    <link rel="stylesheet" href="main.css">

**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**

    <link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
    <link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">

**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**

    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1300px)">

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