Un file CSS o singoli file CSS per ogni pagina?

Question

Quando creo pagine, voglio avere fogli di stile individuali per ogni pagina o un foglio di stile grande per l'intero sito? Ai fini del caricamento, i singoli file non sarebbero una pratica migliore perché sarebbero meno css totali al caricamento?

Answer 1

Utilizza un singolo file, i file CSS vengono memorizzati nella cache e quindi riducono la necessità di scaricare un nuovo file per ogni nuova pagina visitata.

Per aiutare, di solito schiaffo il mio CSS attraverso un Cleaner CSS per ridurne le dimensioni, inoltre puoi GZip CSS usa anche .htaccess , rendendolo ancora più piccolo.

Infine, l'inserimento di tutti i CSS in un singolo file renderà più semplice apportare modifiche di sistema alla presentazione in futuro (l'intero motivo per cui utilizziamo i CSS in primo luogo), faciliterà anche il debug.

Modifica, maggio 2017

Molte cose sono cambiate in oltre 7 anni e chiunque cerchi questa risposta dovrebbe prendere in considerazione la ricerca di metodi di consegna delle risorse più recenti, specialmente ora l'uso di HTTP2 e i preprocessori sono più comuni.

Answer 2

Un suggerimento diverso, utilizzare più fogli di stile durante lo sviluppo e disporre di un meccanismo che unirà tutti i fogli di stile in un singolo file CSS per la distribuzione in produzione. Ciò potrebbe richiedere un po 'di codifica extra e alcuni script extra da eseguire prima della distribuzione della produzione, ma sarebbe l'ideale sia per l'uso di sviluppo che per quello di produzione. Se il processo è adeguatamente automatizzato (il che non è molto difficile da ottenere), ciò non causerà alcun tipo di errore.

Answer 3

Lo scopo principale del foglio di stile è di permetterti di modificare il design in tutte le tue pagine. Se hai h1 {color:red;} su ogni pagina e successivamente vuoi cambiarlo in blu, dovresti modificare il foglio di stile di ogni pagina. Con un foglio di stile potresti cambiare il colore e farlo riflettere su tutto il sito.

Inoltre, il foglio di stile verrà memorizzato nella cache del computer dell'utente anziché scaricato da ogni pagina.

Answer 4

Se vuoi avere uno stile coerente in tutte le pagine del tuo sito web, usa un foglio di stile per tutti gli stili comuni. Altrimenti, potresti trovare abbastanza difficile mantenere molti fogli di stile. Le modifiche dovrebbero essere aggiunte a ciascuno dei fogli di stile multipli.

I fogli di stile che vengono utilizzati solo su una singola pagina potrebbero andare in fogli di stile separati. Ciò potrebbe essere molto utile per i fogli di stile a una sola pagina e / o i fogli di stile per le pagine Web a cui si accede raramente.

I tuoi fogli di stile non verranno ricaricati ad ogni aggiornamento della pagina. Se fai riferimento al grande foglio di stile per uso generale nella tua home page, verrà scaricato solo una volta e memorizzato nella cache per un uso futuro.

Answer 5

" Ai fini del caricamento, non vorresti un foglio di stile più piccolo, quindi crearne uno individuale è una pratica migliore? "

Questo può avere un effetto contrario, poiché usando 1 foglio di stile può essere memorizzato nella cache e quindi ricaricato con facilità, mentre carica costantemente un nuovo file CSS per ogni pagina con il tuo metodo.

La maggior parte dei siti non deve avere più di un foglio di stile per un tipo di media. Tuttavia, se il tuo sito varia drasticamente nel design, suggerirei di avere un foglio di stile di base con tutte le proprietà comuni, e quindi un foglio di stile secondario per ciascuna delle pagine che contiene le differenze.

Questo dovrebbe essere usato solo se le modifiche al CSS sono abbastanza grandi da giustificare l'uso di fogli di stile separati.

Answer 6

Dato che in realtà sono un vero programmatore web (roba di programmazione web di Java, non scripting come PHP), devo darti un'opinione che non ho mai visto nessun web designer dare:

Vai avanti e dividi i tuoi file CSS in più partizioni logiche ove possibile! Se hai una tabella estremamente stilizzata, raccogli i suoi elementi CSS in un file, raccogli anche gli stili di base della pagina effettiva in un altro file, aggiungi quei CSS di navigazione del menu: s al terzo e così via e così via. Ovviamente puoi riutilizzare i singoli CSS: dove sono rilevanti ma NON riempi tutto in un unico grande file!

Answer 7

Mi sono imbattuto in questa discussione cercando la stessa domanda .. Il mio pensiero era di strutturare in questo modo

Layout.css < --- per la struttura del sito, collegamenti, intestazioni ecc. che sono comuni in tutto il sito. form.css < - stili di forma generici reset.css < - tutti i documenti si ripristinano se li si utilizza

e attualmente uso pages.css per tutti gli stili di pagina ..

o

homepage.css about.css gallery.css