css - Single vs multiple stylesheets in responsive web design

Question

In short:

Should you use one or multiple stylesheets when doing responsive web design?

In detail:

In responsive design, you tend to have one main chunk of CSS, then other bits and pieces to adjust the layout when it reaches certain breakpoints. You can structure your code one of two ways:

Single stylesheet

/* Main CSS */

@media only screen and (min-width: 480px) { /* CSS */ }
@media only screen and (min-width: 640px) { /* CSS */ }
@media only screen and (min-width: 800px) { /* CSS */ }

Multiple stylesheets

<link rel="stylesheet" media="screen" href="main.css">
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css">
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css">

It seems that using one stylesheet will reduce the number of HTTP requests, but you'll have a larger file which will contain code that might not be used by some clients. Multiple stylesheets seems to keep file sizes down, but then you have more HTTP requests.

When should you opt for each approach? How do the pros and cons of number of HTTP requests and file size stack up in practice?

Answer 1

Stylesheets are always downloaded, regardless of the current media, whether it be screen, print, or 3D-glasses.

See: Why do all browsers download all CSS files - even for media types they don't support?

So with that in mind, keeping them all in one stylesheet will reduce http requests, where as separate stylesheets will always create more requests with no benefit.