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

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

Answer 1

Well, I certainly can't claim to be an authority on the matter (I'm still learning about coding conventions myself), but I actually lean towards option #1 - a single stylesheet. I'm thinking of a specific implementation of it, though. Instead of having a single break point for each case of screen size you need new styles for, I'd suggest multiple break points - one for the CSS styles of each module where multiple screen sizes need to be addressed.

Ah...that might have been a slightly confusing statement. An example is in order...

Rather than something like:

/*default styles:*/ /*header styles*/ .header-link{  ...  } .header-link:active{  ...  } .header-image{  ...  } .header-image-shown{  ...  } .header-table-cell{  ...  }  /*content styles*/ .content-link{  ...  } .content-link:active{  ...  } .content-image{  ...  } .content-image-shown{  ...  } .content-table-cell{  ...  }  /*footer styles*/ .footer-link{  ...  } .footer-link:active{  ...  } .footer-image{  ...  } .footer-image-shown{  ...  } .footer-table-cell{  ...  }  /*alternate styles for smaller screens:*/ @media only screen and (max-width: 1000px){     /*header styles*/     .header-link{  ...  }     .header-image{  ...  }     .header-image-shown{  ...  }     .header-table-cell{  ...  }      /*content styles*/     .content-link{  ...  }     .content-image{  ...  }     .content-image-shown{  ...  }     .content-table-cell{  ...  }      /*footer styles*/     .footer-link{  ...  }     .footer-image{  ...  }     .footer-image-shown{  ...  }     .footer-table-cell{  ...  } } 

I'd suggest option #1, just implemented as so:

/*default header styles*/ .header-link{  ...  } .header-link:active{  ...  } .header-image{  ...  } .header-image-shown{  ...  } .header-table-cell{  ...  }  /*alternate header styles for smaller screens*/ @media only screen and (max-width: 1000px){     .header-link{  ...  }     .header-image{  ...  }     .header-image-shown{  ...  }     .header-table-cell{  ...  } }  /*default content styles*/ .content-link{  ...  } .content-link:active{  ...  } .content-image{  ...  } .content-image-shown{  ...  } .content-table-cell{  ...  }  /*alternate content styles for smaller screens*/ @media only screen and (max-width: 1000px){     .content-link{  ...  }     .content-image{  ...  }     .content-image-shown{  ...  }     .content-table-cell{  ...  } }  /*default footer styles*/ .footer-link{  ...  } .footer-link:active{  ...  } .footer-image{  ...  } .footer-image-shown{  ...  } .footer-table-cell{  ...  }  /*alternate footer styles for smaller screens*/ @media only screen and (max-width: 1000px){     .footer-link{  ...  }     .footer-image{  ...  }     .footer-image-shown{  ...  }     .footer-table-cell{  ...  } } 

(All the classes are placeholders. I'm not very creative...)

Though this means you'll be doing the same media query declaration multiple times (leading to a bit more code), it's a lot more handy for testing out single modules, which will overall help the maintainability of your site as it gets bigger. Try adding multiple real styles, more tags/classes/id's to the example I gave, and maybe add a bit more whitespace to them, and you'll see soon see how much quicker it is to narrow down and change/append styles (across all screen sizes) in the implementation shown by the second part of the example.

And I credit this answer quite completely to information from Scalable and Modular Architecture for CSS, by Jonathan Snook. (After all, there's no way a beginner like me would be able to figure out and reason an answer like that all by myself!) As quoted from one of the many relevant parts of that book,

"...instead of having a single break point, either in a main CSS file or in a seperate media query style sheet, place media queries around the module states."

Though, if by personal preference or other you'd rather not use this approach, then you're free to go with any of the other options you proposed - after all, Snook himself says that his book "is more style guide than rigid framework", so don't feel like this is a coding standard. (Though I feel it should be. XD)

Answer 2

I believe in "putting code where you expect it". If a style needs overruling I would want my code that overrules to be as close to the default style, thus in the same document. That way, a year from now, I will still know what's going on when I look at the code. In the other approach (separate css file per breakpoint) I will need to remember to goo look for overruling styles code in a separate file. Not a problem, unless I forget I did it that way a year from now. Guess it's personal preference and the browser doesn't care.