Con tutte le chiacchiere recentemente di poter finalmente usare CSS Grid, mi ha fatto pensare: quali altre incredibili funzionalità CSS posso usare ora? Le Variabili CSS sono quelle che sono subito venute in mente.

È passato un po 'di tempo da quando ho sentito parlare di Variabili CSS e aggiunge un intero set di strumenti e un nuovo modo di pensare allo sviluppo del front end che mi entusiasma.

Un aggiornamento sulle variabili CSS

Le variabili CSS sono in giro da qualche anno ma non sembrano essere ampiamente utilizzate. Con la popolarità dei pre-processori come Sass, gli sviluppatori di frontend hanno graffiato quella variabile di prurito molto tempo fa.

Sono stato elettrizzato per la prima volta da CSS Variables nel 2014 e da allora sono entrato e uscito dalla mia sfera di interessi. Sto solo ora pensando di farli entrare nei siti di produzione e ho intenzione di mostrarvi quanto siano semplici e facili da usare.

Dichiarazione della variabile

Dichiarare la proprietà personalizzata è semplice: dobbiamo solo creare la proprietà che vogliamo e aggiungere due trattini all'inizio di essa. Questi possono essere dichiarati ovunque ma aggiungendoli a: root sembra essere un buon approccio al momento.

--my-reusable-value: 20px;

Accedere alla variabile

Usare la proprietà è abbastanza semplice. Accediamo attraverso la funzione var () e usiamo la proprietà che abbiamo dichiarato sopra.

padding: var(--my-reusable-value);

Non è così semplice e glorioso?

Le variabili CSS sono semplici da usare e facili da ricordare. La più grande sfida con le variabili CSS (come con la maggior parte dei CSS) è conoscere il momento e il luogo giusto per usarli. Lanciarli a casaccio è un modo sicuro per creare un pasticcio di un foglio di stile e con queste variabili lanciate nel debug probabilmente diventerà più difficile.

Dovrebbero essere presi in considerazione i casi e le strategie di utilizzo corretti per il loro utilizzo ed è qui che dovrebbe concentrarsi la maggior parte del tuo impegno.

Un caso d'uso interessante: moduli reattivi

Nell'esempio che segue mostrerò un esempio di base di come attualmente costruisco un componente responsive usando le variabili di Sass. Poi ti mostrerò come si può migliorare con le Variabili CSS in un modo che non è possibile con un pre-processore. Questo è un caso d'uso specifico che non si applica a tutte le variabili di modo in cui vengono utilizzate, ma serve a mostrare come le variabili CSS possono essere utilizzate in modo diverso.

Sass Esempio

Vedi la penna Variabili CSS: caso d'uso reattivo senza variabili CSS di Adam Hughes ( @lostmybrain ) sopra CodePen .

Quando uso Sass ci sono alcune diverse metodologie che ho provato. La versione corrente della versione sta inserendo le query multimediali all'interno dei blocchi CSS che voglio modificare. Qui posso usare un CSS standard, un mixin o un'estensione per modificare questo elemento senza spargere gli stili per il componente ovunque.

Un problema con questo è avere più query multimediali e un sacco di variabili che sono in qualche modo correlate ma non. Potrei usare le mappe per le variabili che darebbero più organizzazione, ma penso che il problema principale sia che stiamo usando una molteplicità di variabili per definire una proprietà. Questo sembra sbagliato.

Le variabili di Sass sono usate in anticipo, il che significa che dobbiamo pianificare ogni modo in cui le useremo. Rendono più facile lo sviluppo ma tecnicamente non ci forniscono nuovi superpoteri.

Variabili CSS per il salvataggio

Vedi la penna Variabili CSS: caso d'uso reattivo di Adam Hughes ( @lostmybrain ) sopra CodePen .

Le variabili CSS non devono essere dichiarate in anticipo, sono dinamiche. Questo è utile in un modo molto diverso. Ora possiamo modificare condizionalmente variabili da qualsiasi luogo e in contesti specifici come le query multimediali.

Servendo i nostri stili di query multimediali direttamente da noi possiamo ridurre la quantità di query multimediali sparse per uno stile reattivo. Offre anche un modo davvero bello e pulito di vedere lo spaziatura generale e lo stile tipografico in diversi formati.

Penso che i responsive design e i temi siano due casi d'uso eccellenti per le variabili CSS, ma ci sono così tante possibilità.

In che modo le variabili CSS sono diverse dalle variabili SASS?

Le variabili Sass e le variabili CSS sono due animali diversi, ciascuno con i propri pro e contro.

Le variabili di Sass possono essere organizzate meglio

A causa della popolarità di Sass e della natura più programmatica di Sass, i modelli organizzativi più approfonditi si sono evoluti nel tempo. Mi piacciono particolarmente le mappe sass e la combinazione di variabili di tipo simili nelle mappe. Colori, dimensioni e scorciatoie per i percorsi sembrano essere scelte popolari per includere nelle mappe.

A causa dell'uso relativamente ridotto delle variabili CSS, le migliori pratiche devono ancora evolversi. Mappe e array non sono possibili allo stesso modo in CSS, quindi questi nuovi modelli organizzativi dovranno essere innovativi e risolvere i problemi in modo diverso da Sass.

Le variabili CSS possono essere modificate dinamicamente

Le variabili CSS sono gestite dinamicamente dal browser in fase di esecuzione mentre le variabili di Sass vengono utilizzate quando il CSS viene compilato.

Questo è il punto di forza principale delle variabili CSS per me. Sarà interessante vedere come le persone utilizzano questa caratteristica nel tempo e se sarà all'altezza del suo potenziale.

Le variabili CSS sono una caratteristica del browser standard

Sono personalmente dell'opinione che più cose possiamo rimuovere da Webpack , Gulp e qualunque cosa - new-framework-is-out-now , meglio è. Avere nuove interessanti funzionalità del browser significa che non dobbiamo fare affidamento su framework di compilazione e JavaScript per fare cose che gli sviluppatori ritengono essenziali. Mi azzarderei a pensare che un'alta percentuale di sviluppatori di frontend utilizza le variabili nel proprio CSS in un modo o nell'altro, quindi chiunque utilizzi questa caratteristica di base sembra una cosa sensata da fare. Significa una cosa in meno nella fase di costruzione (che credo siamo tutti d'accordo sta diventando abbastanza grande in questi giorni) e una maggiore coerenza sul web.

Che aspetto ha il supporto?

Il supporto ha un bell'aspetto con un'eccezionale eccezione: IE 11. La maggior parte dei browser moderni supporta le variabili CSS con Edge con alcuni bug.

Al 78,11% questo è più alto di CSS Grid (al momento della stesura) ma il supporto di IE11 potrebbe essere un problema.

Quindi, possiamo usare le variabili CSS ancora?

Penso che il tempo sia ora. Il supporto di IE11 non migliorerà, e sappiamo dalle versioni precedenti di Windows che ci vuole molto tempo prima che alcune persone aggiornino. Ma il supporto tra i browser moderni è ottimo, il che significa che dovremmo guardare alle variabili CSS e sperimentare le possibilità.

Ciò non significa che non dovremmo dimenticare la nostra responsabilità per il supporto del browser più vecchio però. Un sistema di fallback di base che utilizza un tag di supporto, o anche un polyfill, per i browser più vecchi dovrebbe essere considerato, ancor più se l'utilizzo del sito è molto più distorto rispetto ai browser più vecchi.

È un momento entusiasmante per lo sviluppo del front end, e io per primo non vedo l'ora di usare più di queste tecnologie nei miei siti di produzione.