Non ripeterti (ASCIUTTO). È un concetto semplice con la possibilità di cambiare completamente il modo in cui scrivi il codice. Se ripenso ai miei primi giorni con i CSS, non credo che il concetto significasse molto per me. Certo, d'accordo, non ripetermi, grazie per il consiglio. Come si traduce comunque in consiglio applicabile?
Oggi esamineremo i concetti fondamentali su come ripensare il CSS che hai scritto tagliando il grasso e riducendo la ridondanza. Il risultato sarà uno snello CSS che è più facile da creare e mantenere.
Dove penso che tu sia
Questo articolo non è per il ragazzo che trascorre le sue giornate a traboccare attraverso i blog di sviluppo web per avere la possibilità di lasciare commenti e mostrare quanto più conosce a tutti gli altri. Se sei già un genio dei CSS, vai a scrivere un libro.
Invece, sto scrivendo questo per le masse di sviluppatori che stanno finalmente iniziando a prendere il controllo di questa cosa CSS. Hai stilato siti web per un anno, forse due e sei pronto per fare un passo oltre il modo di scrivere codice efficace e imparare come scrivere codice efficiente.
? Sei pronto a fare un passo oltre il modo di scrivere codice efficace e imparare a scrivere codice efficiente?Proprio come me a questo punto della mia carriera, hai sentito il gergo molte volte ma non hai ancora provato questo? dove improvvisamente scrivere CSS efficienti ha senso. Speriamo, troveremo quel clic oggi.
Sass @extend
Non spaventare. Parliamo di un preprocessore. Non preoccuparti, non ti chiederò di usarne uno o di trasformare questo intero pezzo in un tutorial di Sass piuttosto che in un tutorial CSS. Impareremo come scrivere semplici vecchi CSS in modo più efficiente.
? Non impazzire. Parleremo di un preprocessore.Detto questo, Sass, per tutte le sue complessità, utilizza effettivamente l'ereditarietà dei selettori in un modo molto più semplice per avvolgere la mente rispetto ai CSS. È un processo lineare e lineare che rende incredibilmente facile cogliere il concetto di non ripetersi. Diamo un'occhiata.
Tre scatole
Per vedere come funziona, immagina di avere tre classi molto simili ma ancora distinte. Ecco un esempio con le classi? Box? ?scatola grande,? e? smallbox? (si spera che i nomi delle tue classi siano un po 'più specifici).
Come puoi vedere, tutte e tre le caselle richiedono gli stessi stili di base, ma le dimensioni per ciascuna di esse sono diverse, quindi in realtà richiedono tre classi separate. Tuttavia, tutta questa ridondanza non va bene.
Quindi, come possiamo ASCIUGARE? È qui che entra in gioco la funzione Sass @extend. Guardala:
Vedi cosa è successo qui? Anche se non conosci nulla di Sass, questo codice è abbastanza facile da capire. Essenzialmente, piuttosto che scrivere sempre le stesse proprietà con gli stessi valori, possiamo usare @extend per dire? Ehi, prendi semplicemente il codice dalla classe box.? Andiamo avanti e definiamo solo le proprietà che richiedono il cambiamento.
Il codice risultante è più breve e più conciso pur non sacrificando la leggibilità. Sfortunatamente, questo è Sass e la funzione @extend non esiste in un semplice vecchio CSS.
Apprendimento dall'uscita Sass
Allora, qual è il punto della grande lezione di Sass se non possiamo usare @extend in CSS? La cosa da ricordare è che l'ultimo prodotto di Sass, LESS e qualsiasi altro preprocessore è semplicemente Jane CSS. Quindi, se Sass sta davvero operando qualsiasi magia nell'effettivo output, dovremmo essere in grado di individuarlo.
Vediamo come ha gestito la conversione di questi @extends in CSS:
Aha! Questo codice è molto più conciso del nostro concetto originale e tuttavia è ancora puro CSS. La funzione @extend è in realtà abbastanza intelligente per generare CSS snello attraverso l'uso di selettori raggruppati, separati da virgole.
Attraverso @extend, abbiamo indicato Sass alle ridondanze nel nostro codice e li ha trasformati in un'unica regola. Dopo questo, abbiamo definito le altre classi usando solo il codice che doveva essere differenziato.
Saltando Sass
La grande lezione da imparare qui è che non hai bisogno di un preprocessore per fare tutto questo lavoro per te. Puoi saltare del tutto Sass e semplicemente scrivere un codice pulito e conciso in primo luogo (anche se personalmente ritengo che Sass sia le ginocchia delle api). Potrebbe non essere così intuitivo, ma una volta che hai imparato a riconoscere la ridondanza, diventa un compito piuttosto facile.
La lezione importante per me è stata che potevo non necessariamente rendermi conto che sto codificando in modo sleale mentre sto sperimentando diverse idee nel mio codice, e va bene! Codificare in questo modo sin dall'inizio è qualcosa che viene con l'esperienza. Nel frattempo, assicurati di avere un semplice principio nella tua testa: non hai finito semplicemente perché tutto funziona!
? Prendi un semplice principio nella tua testa: non hai finito semplicemente perché tutto funziona !?Potresti gironzolare per ore con un design o un layout funky, e quando tutto si risolve alla fine, tiri un sospiro di sollievo e vai avanti con la vita. Ma non hai finito! Il passo che dovresti fare ora è esaminare tutto il codice che hai scritto per frustrazione e capire come semplificarlo.
Un vero esempio
Per vedere come si presenta questo processo, diamo un'occhiata a un esempio di vita reale che ho codificato per un precedente tutorial. Fondamentalmente, l'effetto che stavo cercando è una pila di carte.
Per rimuoverlo, ho creato un elemento con uno stile di base, quindi utilizzato: before e: after per duplicare l'elemento. Il risultato è stato una pila di tre carte di una singola classe. Ecco il pezzo di codice che risulta:
Mi imbatto in questo problema tutto il tempo quando uso: prima e: dopo. Costruisco ogni elemento individualmente, faccio un passo indietro, poi mi rendo conto che ho praticamente scritto lo stesso codice tre volte diverse!
Tutto quello che dobbiamo fare per pulire questo è qualcosa che qualsiasi bambino in età scolare potrebbe fare: individuare la ripetizione. Nel codice sopra, ogni carta ha la stessa altezza, larghezza, ombra, sfumatura e raggio di confine. Tutto questo codice dovrebbe essere scritto solo una volta. Possiamo raggrupparlo insieme in questo modo:
Questo si prende cura delle proprietà e dei valori che si ripetono su tutte e tre le carte, ma c'è anche una certa ridondanza che esiste solo tra gli pseudo elementi. Prendiamoci cura di questo dopo.
Ora che abbiamo raggruppato tutti questi contenuti insieme, possiamo rimuoverlo dalle altre sezioni in cui è stato ripetuto. Ecco il blocco di codice completo e ritagliato:
Come puoi vedere, abbiamo tagliato circa venti righe di codice in un piccolo esempio! Pensa a quanto impatto hanno questi principi nel corso di un intero sito web.
Facile manutenzione
Troppo spesso, principi come quelli che stiamo imparando oggi sono presentati come regole da seguire semplicemente perché è così dovrebbero fallo. Per la maggior parte delle persone, questo non è un argomento davvero convincente. A chi importa delle pratiche comuni e del bene più grande? Che vantaggio ne ricavo?
? Ti stai risparmiando un sacco di tempo e problemi utilizzando queste tecniche?La buona notizia qui è che il più snello CSS è molto più facile da mantenere e setacciare a lungo termine. Ti stai risparmiando un sacco di tempo e problemi usando queste tecniche. Ad esempio, immagina di aver scritto il codice originale dell'esempio precedente, quindi hai deciso di volere modificare i colori del gradiente. Dovresti passare e aggiornare diciotto righe di codice per questo semplice cambiamento!
Ora immagina di dover fare lo stesso nel nostro esempio conciso, qui devi solo aggiornare sei righe di codice. Certo, la sintassi del gradiente e la situazione del prefisso del browser fanno ancora schifo, ma sei è meglio di diciotto.
Ripensare la struttura del codice
Prima di concludere, vale la pena di discutere che ci sono molti modi per rendere più snello il tuo CSS. Questa è una vasta categoria di discussione che non è sicuramente limitata alle tecniche di cui sopra.
Ad esempio, molti codificatori hanno sviluppato sistemi in cui si separano intenzionalmente diversi tipi di codice se il proprio CSS in nome dell'efficienza. Un modo per farlo nel nostro esempio di scatola originale potrebbe essere quello di separare lo stile visivo arbitrario dal CSS strutturale. Seguendo questa rotta, il nostro codice sarebbe più simile a questo:
Qui abbiamo sviluppato una base? Box? classe che verrebbe applicata a diversi elementi HTML, ognuno dei quali verrebbe anche abbinato a una classe strutturale che definisce la forma, il posizionamento, l'ordine di stack, ecc. della scatola. Praticamente tutto ciò che non è un piacere per gli occhi extra.
Ovviamente, il compromesso qui sarà un piccolo extra. Scoprirai che i programmatori si distinguono ferocemente dall'accettazione o meno di un singolo carattere di markup extra in nome di un CSS più efficiente.
Scuole popolari di pensiero
Attualmente, ci sono due idee o metodi molto popolari in questo filone di ripensamento su come strutturiamo i nostri fogli di stile: OOCSS (Object Oriented CSS) e SMACSS (Scalable and Modular Architecture for CSS).
Sebbene siano effettivamente abbastanza distinte, queste metodologie sono abbastanza concettualmente simili e entrambe cercano di aiutarvi a creare CSS più efficienti, manutenibili e riutilizzabili. Consiglio vivamente di dare un'occhiata più da vicino per vedere cosa ne pensi.
Come scrivi Lean CSS?
Negli esempi sopra, abbiamo imparato tutto su come Sass usa una funzione magica chiamata @extend per aiutarti a scrivere codice più snello con pochissimo sforzo e su come possiamo usare i principi in gioco in quella funzione per eseguire queste imprese usando il vecchio CSS semplice. Abbiamo anche discusso brevemente l'idea di rivalutare completamente la struttura del codice al fine di creare qualcosa che sia più modulare e manutenibile.
Lascia un commento qui sotto e facci sapere cosa pensi di questi metodi. Usi Sass? Con quale frequenza raggruppate i selettori per ridurre la ridondanza? Cosa ne pensi di OOCSS e SMACSS? Che è migliore?