MAISON CODE .
/ CSS · Design Systems · Frontend · Tailwind · Architecture

Variabili CSS: il motore dei moderni sistemi di progettazione

Le variabili SASS muoiono in fase di compilazione. Le variabili CSS risiedono nel browser. Una guida tecnica alla stratificazione semantica, alla tematica dinamica e all'isolamento dei componenti.

AB
Alex B.
Variabili CSS: il motore dei moderni sistemi di progettazione

Per un decennio, SASS è stato il re. Abbiamo definito €brand-color: #ff0000;. L’abbiamo compilato. Ma le variabili SASS hanno un difetto fatale: muoiono in fase di compilazione. Una volta che il CSS raggiunge il browser, la variabile scompare. È solo un codice esadecimale statico. Non puoi modificarlo con JavaScript. Non è possibile limitarlo a un nodo DOM specifico.

Inserisci Proprietà personalizzate CSS (Variabili). --colore-marca: #ff0000;. Queste non sono solo “variabili”. Sono proprietà del DOM. Cadono a cascata. Sono vivi. Noi di Maison Code Paris li utilizziamo come strato fondamentale di ogni sistema di progettazione che costruiamo.

Perché Maison Code ne parla

In Maison Code Paris, agiamo come la coscienza architettonica dei nostri clienti. Spesso ereditiamo stack “moderni” costruiti senza una comprensione fondamentale della scala.

Discutiamo di questo argomento perché rappresenta un punto di svolta critico nella maturità ingegneristica. Implementarlo correttamente differenzia un MVP fragile da una piattaforma resiliente di livello aziendale.

1. La strategia della stratificazione semantica

I principianti associano le variabili direttamente ai colori. --blu: #0000ff; Gli esperti associano le variabili all’Intento.

Utilizziamo un’architettura a 3 livelli:

Livello 1: Primitive (La Tavolozza)

Questa è la tua scatola di vernice grezza. Non ha significato, solo valori.

:radice {
  --palette-blue-100: #ebf8ff;
  --palette-blu-500: #4299e1;
  --palette-blu-900: #2a4365;
  --palette-neutral-900: #1a202c;
  --palette-bianco: #ffffff;
}

Livello 2: Semantica (il token)

Questo associa la tavolozza a uno scopo specifico.

:radice {
  --bg-primary: var(--palette-white);
  --bg-secondary: var(--palette-blue-100);
  --text-body: var(--palette-neutral-900);
  --action-primary: var(--palette-blue-500);
  --action-primary-hover: var(--palette-blue-900);
}

Livello 3: Componente (L’utilizzo)

Controllo di un componente.

.btn-primario {
  colore di sfondo: var(--action-primary);
  colore: var(--bg-primario);
}

Perché? Se il brand decide che “L’azione primaria è ora viola”, cambi una riga nel livello 2. Non grep/sed l’intera base di codice.

2. Temi dinamici (modalità oscura)

Poiché le variabili CSS vengono risolte in fase di esecuzione, l’implementazione della modalità oscura è banale. Ridefinisci semplicemente il livello 2 all’interno di un attributo di dati.

[tema-dati="scuro"] {
  --bg-primary: var(--palette-neutral-900);
  --bg-secondary: var(--palette-black);
  --text-body: var(--palette-white);
}

Quando attivi l’attributo su "", l’intero sito viene ridisegnato istantaneamente (a 60 fps) perché il browser scambia semplicemente i puntatori. Non è necessario ricaricare il foglio di stile.

3. Scoping e isolamento

Le variabili obbediscono alla Cascata. Ciò consente un potente Stile contestuale. Immagina una “sezione oscura” nel mezzo di una pagina chiara.

.sezione invertita {
  --text-body: var(--palette-white);
  --bg-primary: var(--palette-neutral-900);
}

Qualsiasi componente (carta, pulsante, testo) inserito all’interno di .section-inverted adotterà intrinsecamente i valori “Scuro”, anche se il resto della pagina è Chiaro. Il codice del componente non cambia. Consuma semplicemente la variabile dal suo genitore più vicino.

4. Interazione JavaScript: tracciamento del mouse

Puoi leggere/scrivere variabili da JS. Ciò consente effetti dell’interfaccia utente ad alte prestazioni senza re-rendering di React.

L’effetto Spotlight “Segui cursore”:

document.addEventListener('mousemove', (e) => {
  const x = e.clienteX;
  const y = e.clientY;
  document.body.style.setProperty('--mouse-x', `${x}px`);
  document.body.style.setProperty('--mouse-y', `${y}px`);
});
.sotto i riflettori {
  sfondo: gradiente radiale(
    cerchio in var(--mouse-x) var(--mouse-y),
    RGBA(255, 255, 255, 0.2),
    trasparente 150px
  );
}

Funziona interamente sul thread CSS Compositor (principalmente).

5. Integrazione con Tailwind CSS

Adoriamo Tailwind. Ma l’hardcoding dei valori esadecimali in tailwind.config.js è un anti-pattern. Collega Tailwind al tuo livello semantico.

// tailwind.config.js
modulo.esporta = {
  tema: {
    colori: {
      // Usa la variabile CSS, non quella esadecimale
      primario: 'var(--azione-primaria)',
      sfondo: 'var(--bg-primary)',
      testo: 'var(--testo-corpo)',
    }
  }
}

Ora bg-primary genera .bg-primary { background-color: var(--action-primary) }. Ottieni il flusso di lavoro dell’utilità, ma mantieni la flessibilità del runtime.

6. Insidie ​​delle prestazioni

  1. Modifiche alla radice dell’ambito: la modifica di una variabile su :root attiva un ricalcolo dello stile per l’intero albero DOM. È veloce, ma farlo sull’evento scroll è rischioso. Preferire l’ambito delle modifiche a contenitori specifici.
  2. Complessità calc(): width: calc(var(--a) * var(--b) + 10px) forza il browser a eseguire i calcoli a ogni fotogramma se le variabili cambiano. Utilizzare con parsimonia.

7. Le prestazioni di calc() rispetto a quelle precalcolate

Browser Math è veloce, ma non gratuito. width: calc(var(--a) * var(--b)) viene eseguito ad ogni ricalcolo del layout. Se hai 10.000 nodi che eseguono questa operazione, 60 fps scendono a 30 fps. Ottimizzazione: se il valore è statico per un componente, precalcolarlo in JS o SASS, se possibile. Utilizza variabili CSS per valori che cambiano in fase di esecuzione (tema, dimensioni, configurazione utente). Non usarli solo per evitare di digitare numeri.

8. Utilizzo delle variabili per gli stati dell’animazione

Invece di animare “transform”, anima una variabile.

.carta {
  trasformazione: TranslateY(var(--y, 0)) scale(var(--s, 1));
  transizione: --y 0,2s, --s 0,2s;
}
.carta: passa il mouse {
  --y: -10px;
  --s: 1,05;
}

Questo è più pulito che ridefinire l’intera stringa “transform”. Consente inoltre animazioni indipendenti (ad esempio, JS aggiorna --y mentre CSS aggiorna --s). Riduce il sovraccarico di “analisi delle stringhe CSS” per il browser.

9. Strategie di riserva

Per le librerie critiche, fornire sempre un fallback. color: var(--corpo-testo, nero); Se l’utente carica il tuo componente ma dimentica di includere il CSS del Design System, viene comunque visualizzato come nero, non invisibile.

9. Query sui contenitori: variabili contestuali

Le query multimediali (“@media (min-width: 768px)”) interrogano lo Schermo. Le query sul contenitore (“@container (min-width: 300px)”) interrogano il Parent. Questo cambia il modo in cui pensiamo alle variabili. Una Carta può dire: “Se il mio contenitore è piccolo, --padding: 1rem. Se il mio contenitore è grande, --padding: 2rem.” Ciò rende i componenti veramente portatili. Puoi trascinare la “Scheda Prodotto” in una barra laterale (piccola) o in una griglia principale (grande) e adatta la propria logica interna senza sostituzioni esterne.

10. Modello di oggetti CSS digitati (Houdini)

E se potessi controllare la digitazione delle tue variabili CSS? CSS.registerProperty({ nome: '--brand-color', sintassi: '<colore>', valore iniziale: 'nero', eredita: true }) Questo è Houdini. Dice al browser: “—brand-color IS A COLOR”. Se provi a impostarlo su “10px”, il browser lo ignora. Ancora più importante, il browser ora può animarlo correttamente perché sa che si tratta di un colore (interpolando i valori RGB), non solo di una stringa.

12. Houdini: L’immersione profonda

Houdini non riguarda solo i tipi. È una questione di prestazioni. Quando animi una variabile standard, il browser esegue la manipolazione delle stringhe su ogni fotogramma. "10px" -> "11px" -> "12px". Con CSS.registerProperty, esegue un’interpolazione float veloce. 10.0 -> 11.0 -> 12.0. Questo sposta il lavoro dal thread principale al thread del compositore. L’animazione rimane fluida anche se React blocca il thread principale con un pesante compito di idratazione.

13. La regola @property (a prova di futuro)

Abbiamo menzionato Houdini. Ora è stabile in Chrome.

@property --angolo-gradiente {
  sintassi: '<angolo>';
  valore iniziale: 0deg;
  eredita: falso;
}

Ora puoi animare i gradienti! keyframe ruota { su { --gradient-angle: 360deg; } } sfondo: conic-gradient(from var(--gradient-angle), rosso, blu); Prima questo era impossibile. Dovevi usare JS/Canvas. Ora è CSS nativo. Questo sblocca animazioni complesse a 60 fps sul compositore.

14. Perché Maison Code?

Noi di Maison Code spediamo sistemi di progettazione, non solo siti web. Definiamo i token del tuo marchio in JSON (Figma). Li esportiamo automaticamente in variabili CSS. Ci assicuriamo che la tua modalità oscura non sia un ripensamento, ma un cittadino di prima classe. Costruiamo architetture che ti consentono di rebrandizzare il tuo intero sito in 5 minuti modificando alcuni codici esadecimali. Apprezziamo la manutenibilità tanto quanto l’estetica.

14. Elenco di controllo delle variabili CSS

Prima di spedire il tuo Design System:

  1. Spazio dei nomi: hai il prefisso? --ds-color-primary vs --color-primary.
  2. Falback: hai un valore di fallback? var(--colore, #000).
  3. Stampa: le variabili funzionano in modalità stampa (“@media print”)?
  4. Contrasto: controlla l’accessibilità delle varianti della modalità oscura.
  5. Prestazioni: evitare calc() all’interno dei gestori di scorrimento.
  6. Eredità: usi inherits: true per @property?
  7. JS Sync: il tuo JS sta leggendo la variabile corretta?
  8. Linting: utilizzare stylelint per imporre l’utilizzo delle variabili su esadecimale.
  9. Documentazione: esiste un libro di fiabe che mostra tutti i token?
  10. Versioning: come gestisci le modifiche sostanziali nei token?

15. Conclusione

Le variabili CSS sono lo strumento più importante per ridimensionare l’architettura front-end. Colmano il divario tra “Design” (Figma Tokens) e “Codice” (CSS). Se non li usi, non stai costruendo un sistema. Stai solo dipingendo pagine. Interrompere l’hardcoding dei valori esadecimali. Inizia a pensare in gettoni.

Caos del sistema di progettazione?

Il tuo CSS è un pasticcio di !important?

Architettare un sistema di progettazione. Assumi i nostri architetti.