Come utilizzare le variabili CSS come un professionista
Le variabili CSS, note anche come proprietà personalizzate, ti aiutano a ridurre al minimo la ripetizione nei tuoi fogli di stile. Questo, a sua volta, ti aiuta a risparmiare tempo e fatica quando apporti modifiche al tuo progetto. Puoi anche stare certo che non perderai nessun valore che devi aggiornare.
L’accesso al DOM consente di creare variabili, memorizzarle e riutilizzarle in tutto il foglio di stile.
Come definire e utilizzare le variabili CSS
Per rendere i tuoi fogli di stile più organizzati, gestibili e riutilizzabili, puoi utilizzare le variabili CSS in qualsiasi proprietà che accetti un valore.
Prendi il seguente esempio di un file HTML e di un file CSS che non utilizza variabili CSS.
codice HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary">Primary</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: red;
}
Ecco come dovrebbe apparire la tua pagina:
La classe .btn utilizzata nel foglio di stile sopra non è dinamica e ti costringe a creare una classe separata per personalizzare i singoli pulsanti. La creazione di bellissimi siti Web richiede che tu sia dinamico con il tuo stile front-end. L’implementazione dei pulsanti in questo modo renderà semplicemente quel compito un problema da raggiungere.
Come la maggior parte dei linguaggi di programmazione, devi inizializzare e sostituire le variabili CSS.
Per inizializzare una variabile CSS, anteporre al nome della variabile doppi trattini:
:root{
/*CSS variable*/
--variable_name: value;
}
Puoi inizializzare una variabile ovunque, ma tieni presente che sarai in grado di utilizzare solo quella variabile all’interno del selettore inizializzato. Per questo motivo, le variabili CSS vengono convenzionalmente inizializzate all’interno del root selector. Questo mira all’elemento di livello più alto del DOM e consente alle variabili di essere accessibili dall’intero documento HTML su scala globale.
Per sostituire la variabile nel tuo stile CSS, utilizzerai la proprietà var() :
:root {
/*CSS variable*/
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary);
background-color: var(--secondary);
}
.sub-primary {
color: var(--secondary);
background-color: var(--primary);
}
Il root selector contiene due variabili: –primary e –secondary . Entrambe le variabili vengono quindi sostituite nella classe .btn rispettivamente come colore e colore di sfondo.
Usando le variabili, puoi modellare i singoli elementi molto più facilmente. Riutilizzando le variabili, puoi modificare rapidamente un valore una volta per aggiornarlo in ogni istanza.
La proprietà var() può anche accettare un secondo argomento. Questo argomento funge da valore di fallback per il primo argomento in una situazione in cui il primo non è definito o non è valido.
Per esempio:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary, blue);
}
In questo esempio, sostituisci la variabile –primary in stile colore . Se per qualsiasi motivo questo valore fallisce, il foglio di stile utilizzerà il secondo valore come fallback. Puoi anche utilizzare un’altra variabile CSS come valore di fallback.
Manipolazione e sostituzione delle variabili CSS con JavaScript
Manipolare le variabili CSS utilizzando JavaScript può essere un modo efficace per cambiare al volo l’aspetto del tuo sito web. Utilizzando JavaScript, puoi aggiornare i valori di queste variabili e vedere i cambiamenti riflessi nel tuo sito.
È importante notare che le modifiche apportate con JavaScript si applicheranno solo alla sessione corrente. Devi aggiornare la fonte originale o memorizzare il nuovo valore sul client, come in un cookie, per mantenere le modifiche.
Ecco un esempio di come utilizzare JavaScript per aggiornare il valore di una variabile CSS.
codice HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
<script>
function changeColor() {
// Get the element you want to change the variable on
const myElement = document.querySelector(":root");
// Get the current value of the variable
let currentValue = getComputedStyle(myElement).getPropertyValue(
"--secondary"
);
// Set the new value for the variable
myElement.style.setProperty("--secondary", "#DAF7A6");
}
</script>
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary" onclick="changeColor()">
Primary
</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
}
.sub-primary {
color: var(--primary);
background-color: var(--secondary);
}
In questo codice JavaScript, la funzione changeColor() aggiorna il colore del primo pulsante quando l’utente fa clic su di esso.
Utilizzando i metodi di attraversamento DOM, puoi accedere alle classi o ai selettori applicati nel tuo documento HTML e manipolare i valori.
Prima di fare clic sul pulsante:
Dopo aver cliccato sul pulsante:
Puoi anche utilizzare JavaScript per creare nuove variabili CSS o rimuoverle del tutto.
Per esempio:
// Create a new variable
document.documentElement.style.setProperty('--new-color', 'blue');
// Remove a variable
document.documentElement.style.removeProperty('--new-color');
Utilizzo di variabili CSS con preprocessori
L’utilizzo di variabili all’interno della tecnologia frontend è stato inizialmente ottenuto con preprocessori CSS come SASS, LESS e Stylus.
Lo scopo dei preprocessori CSS è sviluppare codice che estenda le capacità fondamentali dei CSS standard. Quindi fai in modo che il codice venga compilato in CSS standard affinché il browser lo capisca, proprio come funziona TypeScript con JavaScript.
Con lo sviluppo delle variabili CSS, i preprocessori non sono più così importanti, ma possono ancora offrire qualche utilità se combinati con le variabili CSS nel tuo progetto.
Puoi definire una variabile SASS $main-color e usarla per impostare il valore di una variabile CSS. Quindi, usa la variabile CSS in una normale classe di stile.
Puoi anche utilizzare le funzioni SASS per manipolare i valori delle variabili CSS.
Per esempio:
:root {
--primary: $main-color;
--secondary: lighten(var(--primary), 20%);
}
.btn {
color: var(--primary);
background-color: var(--secondary);
}
Qui, la funzione SASS lighten() manipola il valore di –primary per ottenere un valore per –secondary .
Si noti che le variabili SASS non sono accessibili da JavaScript. Quindi, se hai bisogno di manipolare i valori delle tue variabili in fase di esecuzione, dovresti usare le variabili CSS.
Usando variabili CSS e preprocessori insieme, puoi sfruttare entrambi i vantaggi, come l’utilizzo di potenti funzionalità di preprocessore come loop e funzioni e funzionalità di variabili CSS come la cascata CSS.
Suggerimenti per l’utilizzo delle variabili CSS nello sviluppo Web
Ecco alcuni suggerimenti importanti da notare che ti aiuteranno a utilizzare meglio le variabili CSS.
Inizia con una convenzione di denominazione chiara
Scegli una convenzione di denominazione per le tue variabili che le renda facili da capire e da usare. Ad esempio, utilizzare un prefisso come –color- per le variabili di colore o –spacing- per le variabili di spaziatura.
Usa le variabili nelle media query
Utilizza le variabili nelle media query per semplificare l’adattamento del tuo design alle diverse dimensioni dello schermo.
Approfitta della natura a cascata dei CSS
Ricorda che le variabili CSS sono a cascata, il che significa che se imposti una variabile su un elemento genitore, influenzerà tutti i suoi figli.
Usa le variabili CSS con cautela
L’uso di troppe variabili CSS può causare confusione, quindi usale con cautela e solo quando ha senso e migliora la manutenibilità del codice.
Metti alla prova le tue variabili
Le variabili CSS sono un modo unico per scrivere codice chiaro e gestibile all’interno del tuo foglio di stile.
È importante notare che non sono ancora completamente supportati su tutti i browser. Pertanto, dovresti testare le tue variabili per la compatibilità del browser per assicurarti che funzionino come previsto e che tutti i valori di fallback funzionino come previsto.
Lascia un commento