Variables CSS avec Claude Code

Optimiser la gestion des styles avec les variables CSS

Les variables CSS (propriétés personnalisées) centralisent la gestion des valeurs de design comme les couleurs et les tailles, simplifiant radicalement le changement de thème et l’adaptation responsive. Avec Claude Code, vous pouvez avancer d’un trait de la conception systématique des design tokens à l’implémentation.

Définition des design tokens

> Définis les variables CSS utilisées dans tout le projet comme design tokens.
> Inclus couleurs, typographie, espacement et ombres.

:root {
  /* Palette de couleurs */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-500: #6b7280;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Couleurs sémantiques */
  --color-bg: var(--color-gray-50);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-border: var(--color-gray-100);
  --color-accent: var(--color-primary-500);

  /* Typographie */
  --font-sans: 'Inter', 'Noto Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  /* Espacement */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Bordures */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;
}

Support du mode sombre

/* Surcharge des couleurs sémantiques pour le thème sombre */
[data-theme="dark"],
.dark {
  --color-bg: var(--color-gray-900);
  --color-text: var(--color-gray-50);
  --color-text-muted: var(--color-gray-400, #9ca3af);
  --color-border: var(--color-gray-800);
  --color-accent: var(--color-primary-400, #60a5fa);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Synchronisation avec les paramètres de l'OS */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--color-gray-900);
    --color-text: var(--color-gray-50);
    --color-text-muted: var(--color-gray-400, #9ca3af);
    --color-border: var(--color-gray-800);
  }
}

Variables au niveau composant

/* Composant bouton */
.btn {
  --btn-bg: var(--color-accent);
  --btn-text: white;
  --btn-padding-x: var(--space-4);
  --btn-padding-y: var(--space-2);
  --btn-radius: var(--radius-md);

  background: var(--btn-bg);
  color: var(--btn-text);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn:hover {
  opacity: 0.9;
}

/* Les variantes se font par simple surcharge des variables */
.btn--secondary {
  --btn-bg: var(--color-gray-100);
  --btn-text: var(--color-text);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-text: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.btn--sm {
  --btn-padding-x: var(--space-3);
  --btn-padding-y: var(--space-1);
  font-size: var(--font-size-sm);
}

Manipulation depuis JavaScript

// Changement de thème
function setTheme(theme: 'light' | 'dark') {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
}

// Modification dynamique de la couleur d'accent
function setAccentColor(color: string) {
  document.documentElement.style.setProperty('--color-accent', color);
}

// Récupération d'une variable CSS
function getCssVariable(name: string): string {
  return getComputedStyle(document.documentElement)
    .getPropertyValue(name)
    .trim();
}

Variables responsive

:root {
  --content-width: 100%;
  --font-size-heading: var(--font-size-2xl);
  --section-padding: var(--space-6);
}

@media (width >= 768px) {
  :root {
    --content-width: 720px;
    --font-size-heading: var(--font-size-3xl);
    --section-padding: var(--space-8);
  }
}

@media (width >= 1024px) {
  :root {
    --content-width: 960px;
    --section-padding: var(--space-12);
  }
}

.container {
  max-width: var(--content-width);
  padding: var(--section-padding);
  margin: 0 auto;
}

Résumé

Les variables CSS sont une technologie indispensable pour l’implémentation du mode sombre et la construction de systèmes de design. Avec Claude Code, vous pouvez implémenter efficacement de la conception systématique des design tokens à l’application aux composants. En les combinant avec Flexbox et CSS Grid, vous pouvez construire des feuilles de style hautement maintenables. Pour les spécifications détaillées des variables CSS, consultez MDN Web Docs.