2012-06-15 8 views
6

Una volta sono stato pensato da sviluppatori Web più avanzati (gee, quando è stato ancora?;)) Che dovremmo evitare di gestire più file CSS e attenerci a uno per progetto. Ha contribuito a migliorare la velocità di caricamento della pagina ed evitare errori stupidi quando si tratta di regole CSS molto sovrapposte.Devo ancora preoccuparmi di mantenere tutti i css in un file?

La mia domanda è: questo approccio è ancora valido?

L'argomento sulle prestazioni di caricamento della pagina non sembra reggere così tanto al giorno d'oggi con Internet a banda larga impressionante e browser Web intelligenti con funzionalità di memorizzazione nella cache ancora più straordinarie. CSS in cascata può infatti essere soggetto a errori, ma solo per gli sviluppatori inesperti e avere un foglio di stile CSS non ci rende davvero a prova di proiettile.

Penso che preferirei avere una serie di fogli di stile predefiniti separati da componenti, quindi collegarli in un'unica regola con il CSS @import. Questo mi permetterebbe anche di includere il foglio di stile di reset per impostazione predefinita.

Chiunque è con me?

+1

La risposta è SASS/LESS. Sviluppo in moduli, utilizzo produttivo con un file css memorizzabile in cache minato. E tutto questo completamente automatizzato. – Christoph

risposta

6

Non si tratta della velocità della larghezza di banda ma del numero di richieste HTTP, questo ha molto senso per una connessione mobile.

Tuttavia l'approccio di avere file CSS diversi per mantenere il progetto modulare è solido, in quanto consente di mantenere il proprio css organizzato nel modo desiderato senza avere tutto il codice in un solo file. Quindi puoi beneficiare dei preprocessori/minificatori di css per concatenare e comprimere tutti i tuoi file css in uno solo per la produzione.

questo articolo http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/

ha un paragrafo su cellulare che spiega bene il motivo per cui questa è una buona pratica:

sei molto meglio di scaricare tutti i contenuti CSS in un colpo sopra il iniziale, connessione riscaldata. In tal modo, aiuterete anche l'utente a prolungare la durata della batteria. Se c'è una ottimizzazione da fare qui allora è semplicemente: concatenare e comprimere.

+1

Vorrei aggiungere che il numero di richieste http diverse è anche importante sul lato server. Ad esempio, Apache nella sua configurazione standard crea un thread per ogni nuova richiesta. – maxdec

+0

Mobile! Buon consiglio, penso di aver perso completamente quell'argomento. –

+0

buona chiamata @ Doppio, +1 – Luca

0

Sono d'accordo con te, non trovo più alcun motivo per tenere solo un singolo foglio CSS, al giorno d'oggi, faccio esattamente quello che hai appena detto, separazione per componente, insieme a caricamento pigro :) (php se dichiarazioni ecc.).

1

Sì, questo approccio è ancora valido. Ci sono decine di articoli su ottimizzazione del carico là fuori, ma l'idea generale è la seguente

Meno file = meno richieste http apportate al server = migliori prestazioni di carico

cosa principale che è cambiato nel corso del tempo è che ora ci sono molti strumenti che supportano la fusione di più file in singoli in fase di runtime. Quindi hai fogli di stile separati per un'organizzazione migliore, il debug in fase di sviluppo e quegli strumenti si uniscono, riducono e impostano le intestazioni di caching corrette in produzione.

Problemi correlati