Variables pour les Design Tokens

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 3 sur 35.

Maintenant que vous savez comment créer et utiliser des variables CSS, voyons comment elles aident à organiser votre design.

Les design tokens sont des variables CSS spéciales qui stockent les couleurs principales, les polices, l'espacement et d'autres valeurs de style de votre site.

En utilisant des design tokens, vous gardez vos styles cohérents et faciles à mettre à jour — il suffit de modifier le token une seule fois, et tout le site reflète le changement !

Voici comment créer des variables CSS pour vos jetons de design :

:root {
  /* Couleurs */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  
  /* Espacement */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* Typographie */
  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
}

Ici, nous appliquons ces design tokens à vos éléments :

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-small) var(--spacing-medium);
  font-size: var(--font-size-medium);
}

.card {
  border: 1px solid var(--secondary-color);
  margin: var(--spacing-medium);
  padding: var(--spacing-large);
}

L'utilisation de design tokens garantit la cohérence sur l'ensemble de votre site web et facilite les mises à jour.

Défi

Facile

Vous avez une page avec des articles sur les aliments sains et quelques styles existants. Votre travail consiste à l'améliorer en utilisant des variables CSS.

À l'intérieur du sélecteur :root, créez une variable nommée --color-secondary et définissez sa valeur sur un orange chaud : #f39c12.
À l'intérieur du sélecteur :root, créez une variable nommée --spacing-medium et définissez sa valeur sur 16px.
Utilisez --secondary-color pour définir la couleur du texte de tous les éléments <h2>.
Utilisez --spacing-medium pour définir le padding de l'élément <section>.

Aide-mémoire

Les jetons de design (design tokens) sont des variables CSS qui stockent les couleurs principales, les polices, l'espacement et d'autres valeurs de style de votre site pour assurer la cohérence et faciliter les mises à jour.

Créez des jetons de design dans le sélecteur :root :

:root {
  /* Couleurs */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  
  /* Espacement */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* Typographie */
  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
}

Appliquez les jetons de design en utilisant var() :

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-small) var(--spacing-medium);
  font-size: var(--font-size-medium);
}

.card {
  border: 1px solid var(--secondary-color);
  margin: var(--spacing-medium);
  padding: var(--spacing-large);
}

Essayez vous-même

<html>
<head>
    <title>Design Tokens</title>
    <style>
      /* Design tokens: colors, fonts, spacing */
      :root {
        --color-primary: #27ae60;  
        --color-text: #2c3e50;      
        --font-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        --spacing-small: 8px;
        --spacing-large: 24px;
        --border-radius: 8px;
        --bg-light: #e8f5e9;          
      }
    
      body {
        font-family: var(--font-base);
        color: var(--color-text);
        background: var(--bg-light);
        margin: 0;
        padding: var(--spacing-large);
        line-height: 1.5;
      }
    
      header {
        text-align: center;
        margin-bottom: var(--spacing-large);
      }
    
      header h1 {
        color: var(--color-primary);
        margin-bottom: 0.2em;
      }
    
      header p {
        font-size: 1.1rem;
        color: #4a6a4a;
      }
    
      section {
        max-width: 700px;
        margin: 0 auto;
        background: white;
        border-radius: var(--border-radius);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      }
    
      h2 {
        margin-top: 0;
      }
    
      article {
        margin-bottom: var(--spacing-large);
      }
    
      article:last-child {
        margin-bottom: 0;
      }
    
      .btn {
        display: inline-block;
        background-color: var(--color-primary);
        color: white;
        border: none;
        padding: var(--spacing-small) var(--spacing-small);
        border-radius: var(--border-radius);
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-decoration: none;
      }
    
      .btn:hover {
        background-color: #1e8449;
      }
    </style>
    </head>
    <body>
    
    <header>
      <h1>Eat Healthy, Feel Great!</h1>
      <p>Your guide to nutritious and delicious foods.</p>
    </header>
    
    <section>
      <article>
        <h2>Avocados</h2>
        <p>Rich in healthy fats and fiber, avocados support heart health and keep you full longer.</p>
        <button class="btn">Learn More</button>
      </article>

      <article>
        <h2>Quinoa</h2>
        <p>A complete protein source, quinoa is great for vegetarians and provides essential amino acids.</p>
        <button class="btn">Learn More</button>
      </article>

      <article>
        <h2>Blueberries</h2>
        <p>Packed with antioxidants and vitamins, blueberries promote brain health and fight inflammation.</p>
        <button class="btn">Learn More</button>
      </article>
    </section>
</body>
</html>