C'è un vantaggio nel raggruppare le media query di css insieme?

Question

(questo potrebbe essere stato risposto già - non riusciva a trovare la risposta però)

Il tradizionale esclusione interrogazione @media tende a raggruppare tutti l'override per una/media taglia sotto lo stesso gruppo staffa.

ad es.

.profile-pic { 
    width:600px; 
} 
.biography { 
    font-size: 2em; 
} 

@media screen and (max-width: 320px) { 
    .profile-pic { 
     width: 100px; 
     float: none; 
    } 
    .biography { 
     font-size: 1.5em; 
    } 
} 

In Sass, c'è un modo davvero ingegnoso di scrivere @media le sostituzioni di query all'interno della dichiarazione nidificato, in questo modo:

.profile-pic { 
width:600px; 
    @media screen and (max-width: 320px) { 
    width: 100px; 
    float: none; 
    } 
} 

.biography { 
    font-size: 2em; 
    @media screen and (max-width: 320px) { 
    font-size: 1.5em; 
    } 
} 

ora, quando compilato, Sass fa non raggruppare la query @media blocchi insieme, in modo da l'uscita finisce per essere qualcosa di simile:

.profile-pic { 
    width:600px; 
} 
@media screen and (max-width: 320px) { 
    .profile-pic { 
    width: 100px; 
    float: none; 
    } 
} 

.biography { 
    font-size: 2em; 
} 
@media screen and (max-width: 320px) { 
    .biography { 
    font-size: 1.5em; 
    } 
} 

ho usato questa tecnica per un recente progetto e quando si applica questo principio a un progetto molto più grande si finisce con mu ltiple @media query section disseminata nel tuo css (ne ho circa 20 finora).

Mi piace molto la tecnica sass in quanto rende più facile seguire il flusso degli overrides (e rende anche più facile spostare le cose intorno).

Tuttavia, mi chiedo se ci sia qualche svantaggio nell'avere più sezioni @media attraverso il CSS, in particolare le prestazioni?

Ho provato il profilo chrome css ma non ho potuto vedere nulla di specifico per le query @media.

(More info on @media in sass on this page)

Answer 1

Un po 'tardi per il partito, ma sulla base dei test sotto l'impatto sulle prestazioni sembra essere minimo. Il test mostra i tempi di rendering per una pagina di esempio con 2000 query multimediali separate e combinate, rispettivamente.

http://aaronjensen.github.com/media_query_test/

Il vantaggio principale sembra essere in file di dimensioni più che altro - che, se si sta comprimendo il CSS per la produzione, sarà sostanzialmente ridotto in ogni caso.

Ma alla fine, come il post link sottostante mette:

"Se avete 2000+ multimediali query nel CSS, penso che si potrebbe voler riconsiderare la vostra strategia di sviluppo dell'interfaccia utente rispetto all'utilizzo di un gioiello da ri-elaborare il tuo CSS. "

post sul blog in dettaglio il problema: http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

Answer 2

presumo che solo dover eseguire il controllo media query una volta (e poi caricare tutti gli stili all'interno di esso) sarebbe meno impegnative di controllo su ogni selettore, ma ho nessun disco prova di questo. Se si ottiene il Canary release of Chrome ci sono strumenti di media query in là.

Come stai usando SASS questo articolo potrebbe essere di un certo interesse - http://css-tricks.com/media-queries-sass-3-2-and-codekit/