Mi chiedo se sia meglio creare uno o più file per i file CSS?Per prestazioni, utilizzare uno o più file css?
Vedo sempre siti Web con un sacco di file CSS, ma è seems better utilizzare solo un file di grandi dimensioni.
Qual è il tuo consiglio?
Per quanto riguarda le prestazioni, si sta meglio con un singolo file, poiché si ottiene una connessione e una richiesta al server (queste operazioni tendono a essere costose, in termini di tempo).
Ecco perché esistono quadri minifying che uniscono insieme tutti i file CSS (e JavaScript) per ogni pagina e li servono in una sola richiesta.
Bene, lo stesso di Yahoo !: s: utilizzare uno per ridurre il numero di richieste HTTP.
Diverse richieste HTTP non sono certo il collo di bottiglia qui, la dimensione del file è in definitiva. Il motivo per cui è meglio dividere le cose il più possibile è perché se vuoi cambiare una certa cosa del tatto del tuo sito, diciamo, il carattere di tutte le intestazioni, vuoi cambiare un file/impostazione solo per quello, e vuoi quel file per essere il più piccolo possibile.
Per CSS ampio e completo, creerei diversi documenti CSS per tutte le diverse cose come il layout, il trattamento delle classi e così via, un altro vantaggio è che se hai più pagine che richiedono un aspetto leggermente diverso da la pagina principale, devono solo collegarsi a un altro file CSS, non a uno completamente diverso, la maggior parte che condividono.
Sì, una volta che tutti i file CSS sono stati caricati e memorizzati nella cache nel browser, è sufficiente caricare quello piccolo che è effettivamente cambiato invece di caricare tutto. –
In effetti, una cosa che non avevo ancora trascurato, non ha bisogno di ricaricare molto dopo gli aggiornamenti o se alcune parti del tuo sito usano un CSS leggermente diverso. Lo faccio solo per organizzazione, ma di solito ho il mio CSS diviso tra frame.css (immissione) colours.css, fonts.css et cetera. – Zorf
Non sarei d'accordo con questo. Il sovraccarico delle connessioni HTTP nella maggior parte dei casi * supera ampiamente * la quantità di CSS che stai scaricando. Anche un file css da 30k vedrebbe fino al 50% del tempo di download totale come overhead di richiesta, la sua suddivisione aumenterebbe solo quella. – womp
Più file sono buoni per l'organizzazione, ma una richiesta al server è sicuramente la migliore. Se guardi i video sul rendimento di Google, ti suggeriscono la minor quantità possibile di richieste HTTP. Ogni richiesta HTTP ha un sovraccarico nell'handshake che non si vuole sostenere se si desidera che il proprio sito sia veloce.
controlla questo script che vi toglierà il più file CSS/JS e li trasformano in un unico file:
Per il più veloce il download e rendering di una pagina, le regole per le prestazioni di Yahoo sono corretti . Vuoi il minor numero possibile di richieste http.
Tuttavia, su molti siti, non è semplicemente conveniente avere un singolo file CSS di grandi dimensioni. La soluzione migliore è organizzare il tuo CSS in tutti i file che desideri e quindi utilizzare uno script lato server per concatenare i file. GZIP sta facendo anche molto.
Una cosa da ricordare per minimizzare i file prima che l'utente arrivi mai. Minimizzare il caricamento della pagina può spesso essere più lento del semplice caricamento di diversi file. – GSto
Assolutamente, di solito uso http://groups.google.com/group/minify per gestire il minification e crea una cache di file concatenati e minimizzati e li offre, quindi non è mai fatto al volo. –
si dovrebbe usare più di un file css utilizzando piuttosto un grande file. Ti aiuta a mantenere il tuo sito anche utilizzare definizioni diverse (classe o nomi id) in diversi css altrimenti prenderà quello che ha dichiarato in seguito.
Ma per le prestazioni, è possibile utilizzare un file di grandi dimensioni perché, Un file CSS di grandi dimensioni porta a un numero inferiore di richieste HTTP, che può migliorare le prestazioni.
Diversi file più piccoli portano a un'organizzazione più semplice che renderà lo sviluppo e la manutenzione meno costosi e più facili.
Usa file css non troppo diversi o almeno prova a metterli su altri domini per velocizzarli scaricandoli dal browser. Ti suggerisco anche di usare un minification tool.
Grz, Kris.
Avere un file CSS non aiuta solo con le richieste HTTP, ma garantisce anche una compressione migliore (la compressione di un file di grandi dimensioni dovrebbe fornire risultati migliori rispetto alla compressione di file più piccoli).
Se le prestazioni non conta per voi
Poi
Se il sito è piccolo, ma ottiene il traffico enorme quindi andare per un unico file css
se il sito è piccoli siti personali o di lavoro allora, ma con meno traffico poi andare al css multipla
Se CSS file manutenibilità fa questioni a voi
Poi
Se il sito è di piccole dimensioni con meno pagine diverse poi per un unico file css.
se il sito è grande poi per css multipla http://www.killersites.com/blog/2008/how-to-organize-css/
richiesta HTTP del file CSS non farà grande differenza in termini di prestazioni del piccolo sito.
mia strategia su questo è semplice. Separo la produzione dallo sviluppo, sia nei file CSS che nei file JS. in fase di sviluppo, posso avere fino a 20 file JS e 10 file CSS, l'organizzazione è super slick e facile, so sempre dove tutto è.
Nella produzione, tutti i file vengono ridimensionati in file 1js e 1css, le modifiche vengono sempre apportate in fase di sviluppo e quindi "messe in scena" alla produzione, in modo da ottenere la manutenibilità dell'applicazione e le prestazioni in produzione.
Uso il minificatore di Yahoo per ridimensionare i miei file, ma è possibile utilizzare qualsiasi cosa sia conveniente per voi.
Buona fortuna
+1. Questo è l'approccio che ho seguito, ed è il meglio di entrambi i mondi, grande manutenibilità/organizzazione e grandi prestazioni. L'unica eccezione che faccio a questo sta tirando jQuery dal server di Google, poiché spesso è già memorizzato nella cache delle macchine degli utenti. – GSto
Pesare.
I vantaggi di un unico file CSS
vantaggi di molteplici
Ho corretto un errore di battitura e alcuni involucri. Spero non ti dispiaccia. Per quanto riguarda la risposta ... assolutamente corretta. :) –
@Gert - Ho sempre gradito tali correzioni. Questa è una delle cose che rendono così grande :) – Oded