singole vs più fogli di stile in responsive web design

Question

In breve:

Se si utilizza uno o più fogli di stile quando si fa responsive web design?

In dettaglio:

In responsive design, si tende ad avere un bello pezzo principale della CSS, poi altri bit e pezzi per regolare il layout quando raggiunge certi punti di interruzione. È possibile strutturare il codice di uno dei due modi:

fogli di stile singolo

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

più fogli di stile

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

Sembra che utilizzando uno foglio di stile ridurrà il numero di richieste HTTP, ma avrai un file più grande che conterrà codice che potrebbe non essere utilizzato da alcuni client. Più fogli di stile sembrano mantenere le dimensioni dei file abbassate, ma poi si hanno più richieste HTTP.

Quando si dovrebbe optare per ciascun approccio? In pratica, come si accumulano i pro e i contro del numero di richieste HTTP e le dimensioni dei file?

Answer 1

fogli di stile sono sempre scaricato, a prescindere dal supporto corrente, sia che si tratti screen, print o 3D-glasses.

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

Quindi, con questo in mente, tutti tenendo un foglio di stile ridurrà le richieste HTTP, dove, come i fogli di stile separati creerà sempre maggiori richieste con alcun beneficio.