Le proprietà personalizzate CSS – spesso conosciute come variabili CSS – rappresentano una delle funzionalità più rivoluzionarie e potenti del CSS moderno. Permettono di creare fogli di stile estremamente manutenibili e facilmente tematizzabili. A differenza delle variabili di pre-processori come Sass o LESS, che scompaiono dopo la compilazione, le proprietà personalizzate CSS sono operative direttamente nel browser. Questo significa che possono essere assegnate a qualsiasi elemento, reagiscono alle media query per design responsivi e possono essere modificate dinamicamente tramite JavaScript, offrendo una flessibilità senza precedenti.

Sintassi Base

Definizione e Utilizzo delle Proprietà Personalizzate
/* Define on :root for global scope */
:root {
  --color-primary: #6366f1;
  --color-bg: #0f172a;
  --color-text: #e2e8f0;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --font-sans: 'Inter', system-ui, sans-serif;
}

/* Use with var() */
.card {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-sans);
}

/* Fallback value */
.card {
  color: var(--color-text, #ffffff);
}

Scope ed Ereditarietà

Le proprietà personalizzate seguono il modello a cascata del CSS e vengono ereditate naturalmente dagli elementi figli. Questa caratteristica le rende ideali per la tematizzazione e la gestione di stili a livello di componente, garantendo coerenza e facilità di aggiornamento.

Variabili con Scope
/* Global defaults */
:root {
  --btn-bg: #6366f1;
  --btn-text: #ffffff;
  --btn-radius: 8px;
}

/* Override for a specific section */
.danger-zone {
  --btn-bg: #ef4444;
  --btn-text: #ffffff;
}

/* The button component uses the same variable names */
.btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--btn-radius);
}

/* Buttons inside .danger-zone automatically turn red */

Modalità Scura con le Proprietà Personalizzate

Tema Chiaro e Scuro
/* Light theme (default) */
:root {
  --bg: #ffffff;
  --bg-secondary: #f8fafc;
  --text: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --accent: #6366f1;
}

/* Dark theme */
[data-theme="dark"] {
  --bg: #0f172a;
  --bg-secondary: #1e293b;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #818cf8;
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f172a;
    --bg-secondary: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --border: rgba(255, 255, 255, 0.1);
    --accent: #818cf8;
  }
}

Integrazione JavaScript

Lettura e Scrittura di Variabili CSS in JS
// Read a CSS variable
const accent = getComputedStyle(document.documentElement)
  .getPropertyValue('--accent').trim();

// Set a CSS variable
document.documentElement.style.setProperty('--accent', '#10b981');

// Theme toggle
function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  document.documentElement.dataset.theme = current === 'dark' ? 'light' : 'dark';
  localStorage.setItem('theme', document.documentElement.dataset.theme);
}

Sistema di Design Token

Scala di Spaziatura e Tipografia
:root {
  /* Scala di spaziatura */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */

  /* Dimensioni dei font */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Dimensioni dei font responsive */
  --text-hero: clamp(2rem, 5vw, 3.5rem);
}

Migliori Pratiche

  • Usa nomi semantici — preferisci `--color-primary` a `--blue-500`. Questo ti permette di cambiare il valore del colore senza dover rinominare la variabile.
  • Definisci tutti i design token in `:root` per una consistenza globale in tutto il tuo progetto.
  • Limita lo scope delle variabili specifiche per componente al selettore del componente stesso.
  • Fornisci sempre valori di fallback per le proprietà critiche: ad esempio, `var(--colore, #000)`.
  • Utilizza le proprietà personalizzate per qualsiasi elemento che potresti voler modificare — colori, spaziatura, font, ombre, `border-radius`, durate delle animazioni, ecc.

Prova i Nostri Strumenti CSS Gratuiti

Minifica e abbellisci il tuo codice CSS istantaneamente.