Imparare a scrivere CSS puliti e ottimizzati richiede molta pratica e un desiderio compulsivo inarrestabile di pulizia. Mantenere il tuo ordinato e ordinato CSS non significa solo alimentare il tuo folle bisogno psicologico di pulizia, tuttavia, nel caso di siti Web particolarmente grandi, il payoff è più veloce nel caricare le pagine. Tempi di caricamento più rapidi equivalgono a maggiore usabilità e maggiore soddisfazione dell'utente.
Questo post esaminerà diverse tecniche che è possibile utilizzare per ottimizzare il CSS e diversi strumenti online che possono comprimere automaticamente il codice.
Comprimere o non comprimere
Prima di entrare nel modo di comprimere il tuo CSS, va notato che spesso c'è un compromesso tra il codice compresso e quello di facile lettura. Molti programmatori sono orgogliosi dell'organizzazione evidente nei loro CSS e non si sognerebbero di metterli attraverso compressori che cancellano commenti e interruzioni di riga. Come web designer, dovresti analizzare i tuoi obiettivi per il codice che scrivi. Se stai creando un sito Web di piccole dimensioni che richiede solo poche righe di CSS, potrebbe non essere necessario eseguire una compressione aggiuntiva. Inoltre, se stai scrivendo un codice che devi condividere con un team di programmatori, inserire commenti e interruzioni di riga in più può far risparmiare ai tuoi colleghi un sacco di tempo e raccogliere una seria gratitudine. Tuttavia, se stai progettando un sito Web di grandi dimensioni che richiede tonnellate di CSS, devi assolutamente tenere d'occhio le dimensioni del file e fare tutto il possibile per non farlo.
Potrebbe volerci un po 'di tempo per trovare il mix perfetto tra compressione e leggibilità, ma entrambi valgono la pena di perseguire e raggiungere quell'equilibrio può rendere il tuo lavoro molto più semplice. Inoltre, non è sicuramente il caso che la compressione si traduca sempre in una riduzione della leggibilità. Molte tecniche che è possibile utilizzare per comprimere il codice genereranno un codice migliore e più organizzato.
Con questo in mente, saltiamo in alcune tecniche per mantenere le dimensioni del file CSS al minimo.
Blocchi stile vuoti
Iniziamo con l'ovvio. Se hai un blocco di stile senza niente, buttalo. Non lamentarti di come potresti usarli più tardi, sono solo confusione e tu lo sai. Non aggiungerlo a meno che tu non abbia un motivo per farlo.
Abbreviazione
La stenografia CSS è un metodo per combinare più righe di CSS in un singolo comando. Prendere l'abitudine di usare tutti i trucchi stenografici di cui sei a conoscenza può ridurre drasticamente le righe di codice che scrivi a lungo termine. Ecco un esempio:
Versione lunga:
Versione abbreviata:
Per ulteriori trucchi stenografici CSS, visita l'articolo qui sotto.
CSS Sprites
L'idea alla base degli sprites CSS sta riducendo il numero di richieste HTTP per accelerare i tempi di caricamento delle pagine. Il modo in cui gli sprite realizzano questa impresa consiste nel combinare più immagini in un'unica immagine, comunemente in un formato a griglia. Ogni singola immagine viene visualizzata spostando la posizione di sfondo dell'immagine più grande. Per uno sguardo più dettagliato su CSS Sprites, guarda il tutorial di Chris Coyier su CSS-Tricks:
Riduzione del commento
Mi piace riempire il mio codice con i commenti. Più commenti lo metto, più velocemente riesco a selezionare visivamente le diverse sezioni di codice. Tuttavia, se si utilizza CSS altamente ottimizzato con un ingombro ridotto, i commenti eccessivi possono consumare preziosi KB. Prova a eliminare tutti i commenti non necessari e a riformattare quelli che devi assolutamente tenere nel minor numero possibile di caratteri.
Font-Font ragionevoli
Quando la dimensione del file è un grosso problema, non impacchettare le famiglie di caratteri al massimo con alternative. Taglia tutto il grasso superfluo e ritaglia le opzioni extra fino a uno o due.
Prima:
Dopo:
Usa colori esagonali
Per ridurre i caratteri, converti tutti i valori RGB nei loro equivalenti esadecimali. Questo può sembrare banale, ma ogni personaggio conta!
Prima:
Dopo:
Elimina le interruzioni di riga
Passare attraverso ogni blocco di stile e rimuovere inutili ritorni rigidi. Puoi anche eliminare l'ultimo punto e virgola
Prima:
Dopo:
10 compressori CSS online
I compressori CSS automatizzano gran parte del lavoro di pulizia del codice. Molti di loro ti danno la percentuale di riduzione della dimensione del tuo file quindi assicurati di provarne alcuni per vedere qual è il migliore.
Drive CSS
Opzioni:
- Modalità di compressione: leggera, normale o super compatta
- Stripping del commento: nessuno, tutti o quelli più lunghi di una lunghezza specificata
Compressore CSS
Opzioni (scegli Sì o No per ciascuna):
- Ordina proprietà
- Comprimi colori
- Comprimi il peso del carattere
- Selettori minuscoli
- Rimuovi i giochi inutili
- Rimuovi punti e virgola non necessari
Arantius
Opzioni (scegli Sì o No per ciascuna):
CSS Optimizer
Opzioni:
- Non rimuovere le interruzioni di riga (Sì o No)
- Ottieni CSS da URL, file o testo incollato
Post della lotteria
Opzioni: nessuna
Pulisci CSS
Opzioni (scegli Sì o No per ciascuna):
- Ordina i selettori
- Ordina proprietà
- Ottimizza i selettori e le loro proprietà (0, 1 o 2)
- Unisci proprietà abbreviate
- Solo ottimizzazioni sicure
- Comprimi colori
- Comprimi il peso del carattere
- Selettori minuscoli
- Case for Properties (Minuscole di UpperCase)
- Rimuovi i backslash inutili
- Convert! Important-hack
- Rimuovi ultimo;
- Salva commenti
- Elimina proprietà non valide (CSS2.1, CSS2.0 o CSS1.0)
- Uscita come file
Pingates
Opzioni (scegli Sì o No per ciascuna):
- Converti nomi di colori lunghi in esadecimale
- Converti codici esadecimali lunghi in codici esadecimali brevi
- Convertire lunghi esadecimali in nomi di colori
- Converti RGB in esadecimale
- Rimuovere le misurazioni zero
- Combina regole identiche
- Combina selettori identici
- Combina proprietà
- Rimuovi le proprietà sovrascritte
- Rimuovi i valori inutili dai margini e dal padding
- Mostra statistiche
- Uscita a colori
- Uscita utilizzando la dimensione più piccola
Insider PHP
Opzioni: nessuna
SevenForty
Opzioni:
- Opzioni di interruzione: 500, 1000, 1500 o 2000
Colonna della pagina
Opzioni: nessuna
GZIP
Nonostante il sito orribilmente brutto, GZIP è uno strumento incredibilmente utile per comprimere molti tipi di codice. Non è il metodo di compressione più semplice da capire e potrebbe essere fonte di confusione per i principianti. Dai un'occhiata a questo tutorial per ulteriori informazioni su GZIPPING del tuo CSS.
Conclusione
Come ho detto prima, molti di questi metodi possono sembrare troppo zelanti e insensati. Il trucco è guardare il quadro generale. Sebbene uno qualsiasi di questi suggerimenti possa avere un effetto quasi insignificante, la combinazione di più o tutte queste tecniche può avere un grande impatto sulle dimensioni del file del tuo CSS. Usa i commenti qui sotto per farci sapere quali metodi di compressione / ottimizzazione usi e perché.