Singolo file .css enorme vs più file .css specifici più piccoli? [chiuso]

C'è qualche vantaggio nell'avere un singolo file .css di un mostro che contiene elementi di stile che verranno usati su quasi ogni pagina?

Sto pensando che per semplicità di gestione, vorrei estrarre diversi tipi di CSS in pochi file e includere ogni file nel mio principale <link />è così male?

Sto pensando che sia meglio

1. positions.css
2. buttons.css
3. tables.css
4. copy.css

vs.

1. site.css

Hai mai visto dei gotcha farlo in un modo contro l'altro?

Un compilatore CSS come Sass o LESS è un ottimo modo di procedere. In questo modo sarai in grado di fornire un singolo file CSS minimizzato per il sito (che sarà molto più piccolo e più veloce di un normale file sorgente CSS singolo), pur mantenendo l'ambiente di sviluppo più bello, con tutto diviso ordinatamente in componenti.

Sass e LESS hanno l'ulteriore vantaggio di variabili, annidamento e altri modi per facilitare la scrittura e la gestione dei CSS. Altamente, altamente raccomandato. Personalmente uso Sass (sintassi SCSS) ora, ma ho usato MENO in precedenza. Entrambi sono fantastici, con benefici simili. Dopo aver scritto CSS con un compilatore, è improbabile che tu ne voglia fare a meno.

http://lesscss.org

http://sass-lang.com

Se non vuoi scherzare con Ruby, questo compilatore MENO per Mac è fantastico:

http://incident57.com/less/

Oppure potresti usare CodeKit (dagli stessi ragazzi):

http://incident57.com/codekit/

WinLess è una GUI di Windows per il comipiling LESS

http://winless.org/

È difficile rispondere a questa domanda. Entrambe le opzioni hanno i loro pro e contro secondo me.

Personalmente non amo leggere un singolo file CSS ENORME e mantenerlo è molto difficile. D'altra parte, dividerlo provoca ulteriori richieste http che potrebbero rallentare le cose.

La mia opinione sarebbe una delle due cose.

1) Se sai che il tuo CSS non cambierà MAI una volta che lo hai creato, creerei più file CSS in fase di sviluppo (per leggibilità), e poi li combinerei manualmente prima di andare in diretta (per ridurre le richieste http)

2) Se sai che cambierai il tuo CSS di tanto in tanto e devi tenerlo leggibile, creerei file separati e userei il codice (a condizione che tu stia usando una sorta di linguaggio di programmazione) per combinarli a tempo di costruzione del runtime (la minificazione / combinazione del runtime è un maiale delle risorse).

Con entrambe le opzioni, consiglio vivamente la memorizzazione nella cache sul lato client al fine di ridurre ulteriormente le richieste http.

EDIT:
ho trovato questo blog che mostra come combinare CSS in fase di esecuzione utilizzando nient'altro che codice. Vale la pena dare un'occhiata (anche se non l'ho ancora testato da solo).

EDIT 2:
Ho deciso di utilizzare file separati in fase di progettazione e un processo di creazione per minimizzare e combinare. In questo modo posso avere CSS separati (gestibili) mentre sviluppo e un file minimizzato monolitico appropriato in fase di esecuzione. E ho ancora i miei file statici e meno sovraccarico del sistema perché non eseguo compressione / minimizzazione in fase di esecuzione.

nota: per voi acquirenti là fuori, consiglio vivamente di utilizzare il bundler come parte del processo di creazione. Sia che tu stia costruendo all'interno del tuo IDE o da uno script di compilazione, il bundler può essere eseguito su Windows tramite incluso exeo può essere eseguito su qualsiasi macchina che sta già eseguendo node.js.

Preferisco più file CSS durante lo sviluppo. La gestione e il debug sono molto più semplici in questo modo. Tuttavia, ti suggerisco di arrivare al momento della distribuzione, invece di utilizzare uno strumento di minimizzazione CSS come YUI Compressor che unirà i tuoi file CSS in un file monolitico.

Vuoi entrambi i mondi.

Volete più file CSS perché la vostra sanità mentale è una cosa terribile da perdere.

Allo stesso tempo, è meglio avere un singolo file di grandi dimensioni.

La soluzione è disporre di un meccanismo che combina più file in un singolo file.

Un esempio è qualcosa di simile

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

Quindi, lo script allcss.php gestisce la concatenazione dei file e la consegna.

Idealmente, lo script controlla le date delle mod su tutti i file, crea un nuovo composito se uno di essi cambia, quindi restituisce quel composito e quindi controlla le intestazioni HTTP If-Modified in modo da non inviare CSS ridondanti.

Questo ti dà il meglio di entrambi i mondi. Funziona alla grande anche per JS.

Avere un solo file CSS è migliore per il tempo di caricamento delle tue pagine, in quanto significa meno richieste HTTP.

Avere diversi piccoli file CSS significa che lo sviluppo è più semplice (almeno, penso di sì: avere un file CSS per modulo dell'applicazione semplifica le cose) .

Quindi, ci sono buone ragioni in entrambi i casi ...

Una soluzione che ti consentirebbe di ottenere il meglio da entrambe le idee sarebbe:

• Sviluppare utilizzando diversi piccoli file CSS
  • cioè più facile da sviluppare
• Per avere un processo di compilazione per la tua applicazione, questo "combina" quei file in uno
  • Quel processo di compilazione potrebbe anche minimizzare quel file di grandi dimensioni, tra l'altro
  • Ovviamente significa che l'applicazione deve avere alcune cose di configurazione che le consentono di passare dalla "modalità multi-file" alla "modalità mono-file".
• E usare, in produzione, solo il file di grandi dimensioni
  • cioè caricamento più veloce delle pagine

Ci sono anche alcuni software che lo fanno combinando file CSS in fase di esecuzione e non in fase di creazione; ma farlo in fase di runtime significa mangiare un po 'più di CPU (e ovviamente richiede un po' di meccanismo di memorizzazione nella cache, per non rigenerare il file di grandi dimensioni troppo spesso)

Storicamente, uno dei principali vantaggi di avere un singolo file CSS è il vantaggio della velocità quando si utilizza HTTP1.1.

Tuttavia, a partire da marzo 2018 oltre l'80% dei browser ora supporta HTTP2, che consente al browser di scaricare più risorse contemporaneamente oltre a essere in grado di spingere risorse preventivamente. Avere un singolo file CSS per tutte le pagine significa una dimensione del file più grande del necessario. Con una progettazione adeguata, non vedo alcun vantaggio nel fare questo se non che è più facile da programmare.

Il design ideale per HTTP2 per le migliori prestazioni sarebbe:

• Avere un file CSS di base che contiene stili comuni utilizzati in tutte le pagine.
• Disponi di CSS specifici della pagina in un file separato
• Utilizza HTTP2 push CSS per ridurre al minimo i tempi di attesa (un cookie può essere utilizzato per impedire push ripetuti)
• Opzionalmente separare above the fold CSS e spingere prima questo e caricare il CSS rimanente in seguito (utile per dispositivi mobili a larghezza di banda ridotta)
• È inoltre possibile caricare i CSS rimanenti per il sito o per pagine specifiche dopo che la pagina è stata caricata se si desidera accelerare il caricamento di pagine future.

I fogli di stile monolitici offrono molti vantaggi (che sono descritti nelle altre risposte), tuttavia, a seconda della dimensione complessiva del documento del foglio di stile, potresti riscontrare problemi in IE. IE ha una limitazione con quanti selettori leggerà da un singolo file . Il limite è 4096 selettori. Se sei un foglio di stile monolitico avrai più di questo, vorrai dividerlo. Questa limitazione sembra solo che sia brutta testa in IE.

Questo è per tutte le versioni di IE.

Vedi il blog di Ross Bruniges e la pagina AddRule di MSDN .

C'è un punto di non ritorno in cui è utile avere più di un file CSS.

Un sito con oltre 1 milione di pagine, che l'utente medio può vedere solo 5 volte, potrebbe avere un foglio di stile di proporzioni immense, quindi cercare di salvare l'overhead di una singola richiesta aggiuntiva per caricamento della pagina con un download iniziale massiccio è falso economia.

Estendi l'argomento al limite estremo - è come suggerire che dovrebbe esserci un grande foglio di stile mantenuto per l'intero web. Chiaramente senza senso.

Il punto di svolta sarà diverso per ogni sito, quindi non esiste una regola rigida e veloce. Dipenderà dalla quantità di css univoci per pagina, dal numero di pagine e dal numero di pagine che è probabile che l'utente medio incontri abitualmente durante l'utilizzo del sito.

In genere ho una manciata di file CSS:

• un file css "globale" per reimpostazioni e stili globali
• "modulo" file CSS specifici per pagine raggruppate logicamente (forse ogni pagina in una procedura guidata di checkout o qualcosa del genere)
• "cs" file css specifici per le sostituzioni nella pagina (oppure, inseriscili in un blocco nella singola pagina)

Non mi preoccupo molto delle richieste di più pagine per i file CSS. Molte persone hanno una buona larghezza di banda e sono sicuro che ci sono altre ottimizzazioni che avrebbero un impatto molto maggiore rispetto alla combinazione di tutti gli stili in un unico file CSS monolitico. Il compromesso è tra velocità e manutenibilità e sono sempre propenso alla manutenibilità. Il compensatore YUI suona piuttosto bene, però, potrei doverlo verificare.

Preferisco più file CSS. In questo modo è più facile scambiare "skin" dentro e fuori come desideri. Il problema con un file monolitico è che può andare fuori controllo e difficile da gestire. Cosa succede se si desidera sfondi blu ma non si desidera che i pulsanti cambino? Basta modificare il file degli sfondi. Eccetera.

Forse dai un'occhiata a compass , che è un framework di authoring CSS open source. È basato su Sass, quindi supporta cose interessanti come variabili, nidificazione, mixin e importazioni. Soprattutto le importazioni sono utili se si desidera mantenere file CSS più piccoli separati ma combinarli automaticamente in 1 (evitando più chiamate HTTP lente). Compass aggiunge a questo un grande set di mixin predefiniti che sono facili da gestire con contenuti cross-browser. È scritto in Ruby ma può essere facilmente utilizzato con qualsiasi sistema ....

ecco il modo migliore:

1. creare un file CSS generale con tutto il codice condiviso
2. inserisci tutto il codice CSS della pagina specifica nella stessa pagina, sul tag o usando l'attributo style = "" per ogni pagina

in questo modo hai un solo css con tutto il codice condiviso e una pagina html. a proposito (e so che questo non è l'argomento giusto) puoi anche codificare le tue immagini in base64 (ma puoi anche farlo con i tuoi file js e css). in questo modo riduci ancora più richieste HTTP a 1.

SASS e LESS rendono tutto questo davvero un punto controverso. Lo sviluppatore può impostare file di componenti efficaci e, al momento della compilazione, combinarli tutti. In SASS è possibile disattivare la modalità compressa durante lo sviluppo per facilitare la lettura e riaccenderla per la produzione.

http://sass-lang.com http://lesscss.org

Alla fine un singolo file CSS minimizzato è quello che vuoi indipendentemente dalla tecnica che usi. Meno CSS, meno richieste HTTP, meno richieste sul server.

Il vantaggio di un singolo file CSS è l'efficienza di trasferimento. Ogni richiesta HTTP indica una risposta di intestazione HTTP per ogni file richiesto e che richiede larghezza di banda.

Fornisco il mio CSS come file PHP con il tipo mime "text / css" nell'intestazione HTTP. In questo modo posso avere più file CSS sul lato server e utilizzare PHP include per inserirli in un singolo file quando richiesto dall'utente. Ogni browser moderno riceve il file .php con il codice CSS e lo elabora come file .css.

Puoi semplicemente usare un file css per le prestazioni e quindi commentare sezioni come questa:

/******** Header ************/
//some css here

/******* End Header *********/


/******** Footer ************/
//some css here

/******* End Footer *********/

eccetera

Sto usando Jammit per gestire i miei file CSS e utilizzare molti file diversi per la leggibilità. Jammit fa tutto il lavoro sporco di combinare e comprimere i file prima della distribuzione in produzione. In questo modo, ho molti file in sviluppo ma solo un file in produzione.

Un foglio di stile in bundle può salvare le prestazioni di caricamento della pagina ma più stili ci sono, più lentamente il browser visualizza le animazioni sulla pagina in cui ci si trova. Ciò è causato dall'enorme quantità di stili inutilizzati che potrebbero non essere presenti nella pagina in cui ci si trova ma che il browser deve ancora calcolare.

Vedi: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

Vantaggi dei fogli di stile in bundle: - prestazioni di caricamento della pagina

Svantaggi dei fogli di stile raggruppati : - comportamento più lento, che può causare instabilità durante lo scorrimento, l'interattività, l'animazione,

Conclusione: per risolvere entrambi i problemi, per la produzione la soluzione ideale è quella di raggruppare tutti i CSS in un file per salvare le richieste HTTP, ma utilizzare JavaScript per estrarre da quel file, i CSS per la pagina in cui ci si trova e aggiornare la testa con esso .

Per sapere quali componenti condivisi sono necessari per pagina e per ridurre la complessità, sarebbe bello aver dichiarato tutti i componenti utilizzati da questa particolare pagina, ad esempio:

<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">

Ho creato un approccio sistematico allo sviluppo CSS. In questo modo posso utilizzare uno standard che non cambia mai. Per prima cosa ho iniziato con il sistema a griglia 960. Quindi ho creato singole linee di CSS per layout di base, margini, riempimento, caratteri e dimensioni. Quindi li stringo insieme secondo necessità. Ciò mi consente di mantenere un layout coerente in tutti i miei progetti e di utilizzare gli stessi file CSS più e più volte. Perché non sono specifici. Ecco un esempio: ---- div class = "c12 bg0 m10 p5 white fl" / div --- Questo significa che il contenitore ha 12 colonne di larghezza, utilizza bg0 ha margini di 10px di riempimento di 5 il testo è bianco e galleggia sinistra. Potrei facilmente cambiarlo rimuovendo o aggiungendo un nuovo - Quello che chiamo uno stile "leggero" - Invece di creare una singola classe con tutti questi attributi; Combino semplicemente i singoli stili mentre codifico la pagina. Questo mi permette di creare qualsiasi combinazione di stili e non limita la mia creatività o mi fa creare un numero enorme di stili simili. I tuoi fogli di stile diventano molto più gestibili, minimizzati e ti consentono di riutilizzarli ancora e ancora. Ho trovato questo metodo fantastico per la progettazione rapida. Inoltre, non disegno più prima in PSD ma nel browser che fa anche risparmiare tempo. Inoltre, poiché ho anche creato un sistema di denominazione per i miei sfondi e gli attributi di progettazione della pagina, cambio semplicemente il mio file di immagine quando creo un nuovo progetto. (Bg0 = sfondo del corpo secondo il mio sistema di denominazione) Ciò significa che se in precedenza avevo un bianco sfondo con un progetto semplicemente cambiandolo in nero significa semplicemente che nel prossimo progetto bg0 sarà uno sfondo nero o un'altra immagine .....