Come risolvere problemi CSS inutilizzati

Sto eseguendo alcuni speedtest su un blog e ricevo sempre lamentele su CSS inutilizzati. Ma questo non è un CSS che non uso mai, non è usato in quella particolare pagina.

Ora lavoro in modo strutturato, ma nel file deve esserci ancora qualche CSS che non verrà utilizzato, perché è necessario su un'altra pagina.

Non penso che usare file CSS diversi su pagine diverse sia la strada da percorrere, penso che tu stia molto meglio semplicemente creando un file di grandi dimensioni che può essere memorizzato nella cache.

Ora c'è un modo elegante di gestirlo, o ti limiti a farlo.

La tua affermazione che stai meglio con un file CSS più grande è corretta. Probabilmente saranno solo pochi KB quando compressi con gzip e dovrebbero essere memorizzati nella cache, quindi non un enorme sovraccarico. Tuttavia, ci sono alcune cose che vale la pena controllare.

Se alcuni CSS vengono sempre utilizzati su una sola pagina, in tal caso potrebbe essere meglio inserire i CSS nella pagina, in alcuni tag di stile. (Nota: questo può rendere le cose difficili da mantenere, specialmente quando in seguito decidi di usare uno stile simile altrove.)

Se prendi le tue pagine più popolari (ad esempio le pagine che rappresentano il 50% + delle visualizzazioni di pagina) e scopri che su tali pagine viene utilizzato solo un numero molto piccolo del tuo CSS, potrebbe essere più veloce per gli utenti dividerlo in due file CSS. Ora, i nuovi utenti che visitano le tue pagine più popolari hanno molto meno da scaricare. Su altre pagine c'è una richiesta HTTP in più, ma non è un grosso problema.

Assicurati che il tuo CSS sia ben ottimizzato. Evitare i selettori discendenti ove possibile. Se il lato destro di un selettore è troppo generico, può rallentare il tempo di rendering. Ad esempio, .class div {}sarebbe un po 'lento perché il browser deve controllare tutti gli <div>elementi della pagina, quindi cercare l'albero DOM in alto per trovare (o meno) un elemento con la classe.

Penso che questo sia un difetto dello strumento speedtest che stai usando, che non guarda l'intero sito e vede quale CSS non è mai stato usato affatto. Se riesci a trovare uno strumento che lo fa, faccelo sapere!

Penso che tu stia molto meglio semplicemente creando un file di grandi dimensioni che può essere memorizzato nella cache.

Sì, questo ha senso, a meno che non ci sia un insieme di pagine che richiedono un po 'di CSS in più, nel qual caso puoi includerlo in quelle.

C'è un piccolo plug-in per Firefox chiamato Dust-Me Selectors , che controlla i CSS e segnala eventuali regole inutilizzate. Tuttavia, non funziona con l'ultima versione di Firefox (v8.0), il che è un po 'un peccato.

PS: Se fossi in te, prenderei CSS Lint con un pizzico di sale - c'è una scuola di pensiero che dice che le sue "raccomandazioni" sono pedanti, e semplicemente esagerano. (Per maggiori dettagli, vedi l'articolo persuasivo di Matt Wilcox, " CSS Lint è dannoso " ). Nella migliore delle ipotesi, è completamente non ufficiale ... e, ammettiamolo, abbiamo davvero bisogno di un altro strumento / pseudo-standard per soddisfare?

Il modo più ottimizzato e scalabile che posso immaginare di affrontare questo consiste in:

1. Realizzare un file CSS principale per tutto ciò che riguarda l '"ambito globale" (come il design del sito, le classi globali, le librerie, i plugin, ecc ...).

2. Realizzare un sistema che coinvolga una cartella contenente un file CSS univoco per pagina (solo se necessario). Questi file potrebbero avere lo stesso nome file della pagina a cui sono collegati in modo da poter eseguire uno script lato server su ogni pagina che cerca un file CSS in quella cartella e aggiungerlo alla pagina se ce n'è uno.

3. Forse, creando diversi file CSS per elementi specifici del browser che carichi solo quando il visitatore ha il browser relativo.

In questo modo, finirai con un modo solido e ottimizzato di separare il tuo CSS. Sì, ci saranno ancora regole inutilizzate nel file principale, ma saranno dove dovrebbero essere in un punto di vista logico.

Inoltre, tieni presente che quei 3 "livelli" di file CSS verranno memorizzati nella cache come sarebbe un singolo file CSS.