Share
Quando lavori con i preprocessori CSS come Sass, Less (o qualsiasi altro linguaggio di programmazione), sfrutterai il potere delle variabili. Tuttavia, se crei spontaneamente i nomi delle variabili durante la codifica, le probabilità sono che la tua convenzione di denominazione manchi di coesione. Dovresti pensare all'organizzazione modulare dei nomi delle variabili (e del progetto). Ciò porterà struttura e unità al tuo progetto nel suo insieme, rendendo più facile la comprensione e la navigazione dell'intero progetto.
Supponi di aver bisogno di una variabile per il colore del testo nel tuo progetto. Potresti chiamarlo $ Text-color, o dovresti chiamarlo $ Color-text? Come decidi? Sceglierne uno a caso può contribuire a una mancanza di struttura man mano che aumenta il numero di variabili nel progetto. Come dimostra l'esperienza, spesso dimentichiamo esattamente come abbiamo chiamato le variabili per progetti particolari. Ciò comporta confusione e lunghi metodi di ricerca e sostituzione globali per i nomi delle variabili.
Ciò di cui abbiamo bisogno è una regola per definire e selezionare i nostri nomi di variabili. Un ottimo modo per mantenere la modularità nel progetto è raggruppare le variabili che condividono relazioni e punti in comune. Quindi puoi nominarli ordinando le parole che descrivono la loro funzione da generico a specifico (più o meno allo stesso modo in cui i CSS funzionano con specificità) da sinistra a destra.
Ad esempio, se ho quattro variabili per quattro colori di bordo diversi, posso nominarli tutti a partire da "bordo" (poiché è il termine generico che tutti condividono) e ottenere più specifici con una lettura da sinistra a destra. Raggruppando e denominando le variabili in questo modo, il tuo codice sarà più facile da leggere, comprendere e richiamare.
Supponiamo di lavorare in SASS e vogliamo creare una serie di variabili che definiscono la tavolozza dei colori del nostro progetto. Se stiamo lavorando con una sfumatura di blu, potremmo creare alcune variabili come questa:
$ Blu; $ Blu scuro; $ Medio-blu; $ Più scuro-blu; $ Azzurro; $ Più leggero-blu;
Un modo migliore per nominare queste variabili sarebbe iniziare con la parola generica che tutti condividono in comune: blu. Quindi possiamo ottenere più specifici da sinistra a destra:
$ Blu; $ Blu-scuro; $ Blu-più scuro; $ Luce blu; $ Blu-leggero;
Questo non solo aiuta a ricordare, ma consente un editor di testo (come Testo sublime, Coda ecc.) Per suggerire facilmente i colori. In questo modo non devi memorizzare esattamente come hai chiamato le tue variabili. Piuttosto, puoi iniziare genericamente e diventare più specifico mentre l'editor di testo suggerisce automaticamente i nomi delle variabili. Tutto quello che devi ricordare è che vuoi un colore blu. Quindi inizi a digitare $ blu e puoi ottenere un elenco di tutti i diversi blues che hai creato!
Immagina di lavorare su un progetto di grandi dimensioni e ho raggruppato tutte le mie variabili che contengono valori di colore anteponendoli alla parola generica che tutti hanno in comune: colore.
// OK $ border-color; $ Dark-border-color; $ Luce-colore-border; $ Culminante; $ Link; $ Link-scuro; $ Testo; $ Colore del testo; $ Link-colore-luce; $ Più leggero-text-colore;
// Better $ color-border; $ Color-border-scuro; $ Color-border-luce; $ Colore evidenziazione; $ Colore-link; $ Color-link-scuro; $ Color-link-luce; $ Colore del testo; $ Colore-text-luce; $ Colore-text-leggero;
Quindi, diciamo che avevo bisogno di un colore per un bordo. Comincio a scrivere border: 1px solid $ colo e il mio editor di testo può suggerire tutte le variabili di colore che ho definito per il mio progetto.
Forse ho molti colori nel mio progetto ma voglio solo i colori dei bordi. Potrei pre-definire alcune variabili con i miei colori di bordo desiderati. Quindi, durante la codifica, posso semplicemente continuare a restringere la specificità del nome della mia variabile border: 1px solid $ color-border e il mio editor di testo suggerirà automaticamente qualsiasi variabile che ho da quel prefisso. Tutto quello che devo fare è scegliere quello che voglio!
Anche se non avessi suggerito il codice, questo sarebbe comunque un modo efficace per nominare le tue variabili. Ti aiuta a ricordare facilmente ciò che hai chiamato variabili perché le variabili che condividono le relazioni condividono i prefissi.
Assegnare un nome alle variabili in questo modo modulare ti aiuterà a comprendere il tuo progetto concettualmente prima di codificarti, mentre esegui il codice e dopo la codifica. È una situazione win-win-win!
Accentsconagua