Devo dividere un file di query multimediali CSS di grandi dimensioni in file separati per ogni dimensione dello schermo?

Sto lavorando su un sito Web di design reattivo per fornire contenuti per tutte le dimensioni dello schermo. Ho query multimediali per 5 diversi "passaggi" e il file CSS è di circa 30 Kb.

Sarebbe meglio dividerlo in file separati e renderli simili a questo:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

o dovrei tenerli in un file CSS?

Aggiornamento: volevo solo aggiungere che la mia preoccupazione principale era la velocità di apertura / rendering tra browser / dispositivo e non la facilità di sviluppo.

Penso che dipenda davvero da ciò che trovi più semplice per lo sviluppo e da ciò che ti aiuta a tenere un foglio di stile ordinato.

L'unico vero inconveniente che mi viene in mente nella divisione sarebbe che se l'attributo di un elemento appare in tutti i tuoi fogli di stile, dovresti aggiornare 5 file separati per cambiarlo (piuttosto che apparire fianco a fianco in un unico posto).

Secondo la risposta su questo post, i browser scaricheranno tutti i fogli di stile indipendentemente, quindi dividere la risoluzione non è un risparmio di larghezza di banda: /programming/16657159/when-using-media-queries-does-a -phone-load-non-pertinenti ripresi-query-e-immagini

Dipende leggermente da ciò che vuoi ottenere: stai cercando di velocizzare il caricamento della tua pagina o stai cercando di semplificare lo sviluppo?

Se ti rivolgi a quest'ultimo, potresti usare più fogli, ma è tutta una questione di preferenza. Trovo più semplice utilizzare un file di grandi dimensioni poiché ti offre una panoramica di tutti gli stili che hai dichiarato.

Se si desidera una pagina di caricamento più veloce di quanto la migliore scommessa sarebbe quella di ridurre al minimo la quantità di richieste, dal momento che un overhead della richiesta è piuttosto grande. Inoltre potresti mantenere una versione di sviluppo per te stesso e servire un css minimizzato sul web (trovo YUI un buon metodo: http://www.refresh-sf.com/yui/ ).

Inoltre proverei a ottimizzare il CSS stesso. Puoi provare a unire classi molto simili, ad esempio:

.bold-and-italic { font-weight: bold; text-style: italic; }

Può essere convertito in:

.bold { font-weight: bold; }
.italic { text-style: italic; }

L'unica cosa è che devi cambiare leggermente l'html da <span class="bold-and-italic">foo bar</span>in<span class="bold italic">foo bar</span>

Posso fortemente suggerirti di dare un'occhiata a Bootstrap ( http://getbootstrap.com ), questi ragazzi hanno fatto un ottimo lavoro nel suddividere le classi in più 'sottoclassi'.

Spero che questo possa essere d'aiuto.

Probabilmente è meglio avere un solo file CSS, ma minimizzarlo e decomprimerlo. Supponendo che i tuoi 30 KB siano prima di farlo, probabilmente otterrai le dimensioni del file fino a circa 5 KB con minificazione (rimozione degli spazi bianchi) e gzipping.

Dividere probabilmente ti darà un po 'più di velocità, ma solo in alcune condizioni.

• Dovresti assicurarti che venga caricato solo un foglio di stile alla volta, altrimenti avresti bisogno di due o più richieste HTTP, che hanno un overhead stesso, che annullerebbe almeno in parte il guadagno dalla dimensione del file più piccola. Per fare questo, è non è sufficiente solo dividere il foglio di stile e inserire più <link>-tag con diversi attributi dei media, i browser sembrano caricare tutti <link>i fogli di stile ED indipendentemente dai media query (grazie a @cimmanon per queste informazioni, non sapeva che) .
• Il numero di regole CSS condivise tra i fogli di stile deve essere piccolo, altrimenti ciascuno dei fogli di stile multipli dovrebbe contenere tutte le regole comuni e avrebbe quindi quasi le dimensioni dell'originale.
• Usi un preprocessore CSS (o qualcosa di simile), quindi è gestibile avere gli stessi pezzi di codice in 5 fogli di stile.

Inoltre: non ottimizzare prematuramente. Fallo solo se hai problemi di prestazioni.

È necessario dividere i file CSS in base a query multimediali perché i file CSS bloccano il rendering.

Quando il browser sta costruendo il tuo DOM, deve prima attendere e caricare tutti i tuoi file CSS. Ridurrai il tempo di caricamento della pagina se alcuni dei tuoi file CSS vengono caricati solo in base a determinate query multimediali.

Questo vale anche per l'aggiunta asincrona a un tag di script JavaScript; es <script src='myfile.js' async></script>. : .

Il DOM non deve attendere il caricamento del file JS. Aggiungi asincrono solo se la costruzione del tuo DOM non ha bisogno di JavaScript durante il caricamento.

Sarei propenso a dire questo.

Per la produzione, tenerli sempre in un file; il motivo è che è più efficiente per il browser e che dovrebbe essere il tuo interesse primario (IMO) quando passi dallo sviluppo alla produzione.

Lo sviluppo è un diverso bollitore di pesce. Tendo a dividere le query multimediali in modo che siano per qualsiasi elemento, ad esempio:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

Come in genere se sto cambiando un elemento, non voglio cercare in tutto il luogo per il CSS (anche se puoi usare qualcosa come grep ...).

Ma una cosa che direi è che vale la pena considerare il sito stesso, il processo di sviluppo e il futuro. Se ritieni sinceramente che valga la pena separarli in file basati sulla dimensione dello schermo, provalo. Crea una copia del sito (se possibile), divertiti con la copia - se lo rende più semplice, usalo. Non è necessario seguire un paradigma unico per tutte le modalità di sviluppo di un sito Web.

Semplice: usa 1 foglio di stile e aggiungi semplicemente dei commenti per facilitare la ricerca e la modifica degli stili CSS, ad esempio:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

Se lo desideri, puoi utilizzare più fogli di stile e chiamarli per ogni dimensione specifica.

Preferirei guardare Bootstrap . È 1 file CSS che contiene tutto il CSS. Funziona su quasi il 99% dei browser ed è estremamente reattivo.

Fai clic sulla demo dal vivo e ingrandisci ( Ctrl += ingrandisci, Ctrl -= rimpicciolisci, Ctrl 0= normale) o aprilo sul tuo dispositivo mobile per vedere come viene visualizzato.