Skip to main content

Chapitre 69 : Architecture CSS pour les formulaires complexes

Concepts clés : Utilisation des variables CSS pour la thématisation globale des formulaires

Dans les applications d'entreprise, les formulaires ne sont pas de simples ensembles de champs. Ils constituent souvent le cœur de l'interface utilisateur, avec des besoins de cohérence visuelle stricts, des états d'erreur complexes et une nécessité de thématisation (Dark Mode, Branding client, Accessibilité).

Une approche "ad-hoc" où chaque input est stylisé individuellement conduit rapidement à une dette technique insurmontable. Ce chapitre explore l'architecture basée sur les Design Tokens via les variables CSS pour construire des systèmes de formulaires scalables et maintenables.

L'Architecture par Design Tokens​

1. Quoi​

L'architecture par Design Tokens consiste à décomposer la stylisation en trois couches d'abstraction utilisant les Custom Properties (variables CSS). Au lieu de définir une couleur hexadécimale directement sur un élément, on crée une chaîne de références :

  1. Global Tokens (Primitive) : Valeurs brutes (ex: --color-blue-500: #3b82f6). Ils ne portent aucune intention sémantique.
  2. Semantic Tokens (Alias) : Valeurs liées à un rôle (ex: --form-border-primary: var(--color-blue-500)). Ils décrivent à quoi sert la couleur.
  3. Component Tokens (Local) : Valeurs spécifiques à un composant (ex: --input-border-color: var(--form-border-primary)). Ils permettent de surcharger un composant sans affecter le reste du système.

2. Pourquoi​

Dans un projet senior, cette approche résout plusieurs problèmes critiques :

  • Maintenance centralisée : Changer la couleur principale de tous les formulaires de l'application se fait en modifiant une seule variable sémantique.
  • Thématisation dynamique : Le passage d'un mode clair à un mode sombre ne nécessite pas de réécrire le CSS, mais simplement de redéfinir les valeurs des tokens sémantiques dans une classe .dark-theme.
  • Consistance visuelle : On évite d'avoir 15 nuances de gris légèrement différentes pour les bordures des inputs.
  • Découplage : Les développeurs de composants n'ont pas besoin de connaître la palette de couleurs exacte, ils utilisent des tokens sémantiques comme --form-error-color.

3. Comment​

A. Syntaxe de base​

L'implémentation repose sur la cascade CSS et l'héritage des variables.

:root {
  /* Global Tokens */
  --color-gray-100: #f3f4f6;
  --color-gray-300: #d1d5db;
  --color-blue-600: #2563eb;
  --color-red-600: #dc2626;

  /* Semantic Tokens */
  --form-bg: var(--color-gray-100);
  --form-border: var(--color-gray-300);
  --form-primary: var(--color-blue-600);
  --form-error: var(--color-red-600);
}

B. Cas concret : Système de formulaire robuste​

Voici une implémentation complète pour un système de formulaires complexes. Nous utilisons des variables locales pour permettre une personnalisation granulaire.

/* 1. Définition du système de design (Design System) */
:root {
  /* Primitives */
  --palette-blue-500: #3b82f6;
  --palette-blue-700: #1d4ed8;
  --palette-slate-200: #e2e8f0;
  --palette-slate-500: #64748b;
  --palette-red-500: #ef4444;
  --palette-white: #ffffff;

  /* Sémantique - Formulaires */
  --form-field-bg: var(--palette-white);
  --form-field-border: var(--palette-slate-200);
  --form-field-text: var(--palette-slate-500);
  --form-field-focus-ring: var(--palette-blue-500);
  --form-field-error: var(--palette-red-500);
  
  /* Espacements et Radius */
  --form-radius: 6px;
  --form-spacing-sm: 0.5rem;
  --form-spacing-md: 1rem;
}

/* 2. Thème Sombre (Surcharge sémantique uniquement) */
[data-theme="dark"] {
  --form-field-bg: #1e293b;
  --form-field-border: #334155;
  --form-field-text: #94a3b8;
  --form-field-focus-ring: #60a5fa;
}

/* 3. Composant Input (Utilisation de tokens locaux) */
.form-input {
  /* Tokens locaux : on mappe le sémantique vers le composant */
  /* Cela permet de surcharger l'input sans toucher au reste du formulaire */
  --input-bg: var(--form-field-bg);
  --input-border: var(--form-field-border);
  --input-color: var(--form-field-text);
  --input-ring: var(--form-field-focus-ring);

  width: 100%;
  padding: var(--form-spacing-sm) var(--form-spacing-md);
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-color);
  border-radius: var(--form-radius);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-input:focus {
  border-color: var(--input-ring);
  box-shadow: 0 0 0 3px rgba(var(--input-ring), 0.2); /* Note: nécessite conversion RGB pour l'opacité */
}

/* 4. État d'erreur */
.form-input.is-invalid {
  --input-border: var(--form-field-error);
  --input-ring: var(--form-field-error);
}

4. Limitations​

L'utilisation intensive de variables CSS présente quelques défis :

  1. Opacité et Couleurs : On ne peut pas nativement ajouter d'opacité à une variable contenant une couleur hexadécimale (ex: rgba(var(--my-color), 0.5) ne fonctionne pas si --my-color est #fff).
    • Solution : Stocker les valeurs de couleurs en format RGB brut (--color-blue-rgb: 59, 130, 246).
  2. Performance : Bien que négligeable pour la plupart des cas, une cascade de variables trop profonde (10 niveaux de redirection) peut légèrement impacter le rendu sur des pages contenant des milliers d'inputs.
  3. Support Navigateur : Les variables CSS sont supportées partout aujourd'hui, mais attention si vous devez supporter des navigateurs extrêmement anciens (IE11).

5. Zone de Danger​

❌ L'erreur commune : Le "Hard-coding" sémantique Définir --input-border-color: #ccc directement dans le composant. Si vous avez 10 composants de formulaire différents, vous devrez modifier 10 fichiers pour changer la couleur des bordures.

✅ La bonne pratique : La chaîne de dépendance Primitive (#ccc) → Sémantique (--form-border) → Composant (--input-border). Le composant ne connaît jamais la valeur finale, il connaît seulement son rôle.

Hiérarchie des Design Tokens CSS​

Questions clés​

1. Pourquoi utiliser des tokens de composants si on a déjà des tokens sémantiques ?

Découvrir la réponse

Les tokens de composants permettent une flexibilité maximale. Si un formulaire spécifique dans l'application (ex: un formulaire de paiement critique) doit avoir des bordures plus épaisses ou une couleur différente sans affecter tous les autres formulaires du site, on peut surcharger le token de composant localement sans briser la sémantique globale.

2. Comment gérer les couleurs avec opacité en utilisant les variables CSS ?

Découvrir la réponse

La méthode standard consiste à définir la variable avec les composantes RGB séparées par des virgules : --color-primary-rgb: 59, 130, 246; Ensuite, on l'utilise ainsi : background-color: rgba(var(--color-primary-rgb), 0.5);.

3. Quelle est la différence entre une variable CSS et une variable SASS/LESS ?

Découvrir la réponse

Les variables SASS sont résolues à la compilation (statiques). Les variables CSS sont résolues au runtime par le navigateur (dynamiques). Cela signifie qu'une variable CSS peut être modifiée via JavaScript ou varier selon le scope du DOM (ex: une variable différente pour un élément parent), ce qui est impossible avec SASS.

4. Comment organiser les fichiers CSS pour cette architecture ?

Découvrir la réponse

Une structure recommandée serait :

  • tokens/primitives.css (Couleurs, espacements bruts)
  • tokens/semantic.css (Mappage des primitives vers des rôles)
  • components/form-input.css (Styles du composant utilisant les tokens)

Mise en pratique​

Exercice 1 : Reproduction guidée​

Objectif : Créer un système de base avec 3 niveaux de tokens pour un champ de saisie.

  1. Définissez un token global --color-brand: #6200ee.
  2. Définissez un token sémantique --form-accent: var(--color-brand).
  3. Définissez un token de composant --input-focus-color: var(--form-accent).
  4. Appliquez --input-focus-color à la bordure d'un input lors du :focus.
Découvrir la solution commentée
:root {
  /* Niveau 1: Global */
  --color-brand: #6200ee;
  
  /* Niveau 2: Sémantique */
  --form-accent: var(--color-brand);
}

.my-input {
  /* Niveau 3: Composant */
  --input-focus-color: var(--form-accent);
  
  border: 1px solid #ccc;
  padding: 8px;
}

.my-input:focus {
  /* Utilisation du token local */
  border-color: var(--input-focus-color);
  outline: none;
}

Exercice 2 : Adaptation (Thématisation)​

Objectif : Implémenter un mode "High Contrast" pour un formulaire en utilisant l'architecture précédente.

  1. Reprenez le code de l'exercice 1.
  2. Créez une classe .high-contrast qui surcharge uniquement les tokens sémantiques.
  3. Le fond doit devenir noir, le texte blanc, et l'accent jaune vif (#ffff00).
Découvrir la solution commentée
:root {
  --color-brand: #6200ee;
  --color-yellow: #ffff00;
  --color-black: #000000;
  --color-white: #ffffff;

  --form-accent: var(--color-brand);
  --form-bg: #ffffff;
  --form-text: #000000;
}

/* On ne touche pas aux styles du composant, on change juste les valeurs sémantiques */
.high-contrast {
  --form-accent: var(--color-yellow);
  --form-bg: var(--color-black);
  --form-text: var(--color-white);
}

.my-input {
  --input-focus-color: var(--form-accent);
  background-color: var(--form-bg);
  color: var(--form-text);
  border: 1px solid var(--form-text);
}

.my-input:focus {
  border-color: var(--input-focus-color);
}

Exercice 3 : Conception (Cas métier)​

Objectif : Concevoir l'architecture CSS pour un formulaire de "Dashboard Admin" qui doit supporter 3 thèmes de couleurs différents selon le rôle de l'utilisateur (Admin = Rouge, Modérateur = Bleu, Éditeur = Vert), tout en gardant une structure de code unique.

Contraintes :

  • Utiliser une seule classe de composant .admin-input.
  • Utiliser des attributs de données (data-role) pour le changement de thème.
  • Séparer strictement les primitives des sémantiques.

HTML source :

<!-- L'attribut data-role sur le conteneur parent pilote le thème de tous les inputs enfants -->

<section data-role="admin">
  <h2>Formulaire Admin</h2>
  <label for="admin-name">Nom complet</label>
  <input id="admin-name" type="text" class="admin-input" placeholder="Jean Dupont" />
  <label for="admin-email">Email</label>
  <input id="admin-email" type="email" class="admin-input" placeholder="jean@example.com" />
</section>

<section data-role="moderator">
  <h2>Formulaire Modérateur</h2>
  <label for="mod-name">Nom complet</label>
  <input id="mod-name" type="text" class="admin-input" placeholder="Marie Martin" />
</section>

<section data-role="editor">
  <h2>Formulaire Éditeur</h2>
  <label for="ed-name">Nom complet</label>
  <input id="ed-name" type="text" class="admin-input" placeholder="Pierre Durand" />
</section>
Ce que vous devez observer

Chaque <section> porte un data-role différent. La classe CSS .admin-input est identique sur tous les champs. Seul le token sémantique --form-theme-color change selon le contexte parent — c'est la cascade CSS qui fait le travail, sans aucune classe supplémentaire sur les inputs.

Découvrir la solution commentée
/* 1. Primitives */
:root {
  --clr-red-500: #ef4444;
  --clr-blue-500: #3b82f6;
  --clr-green-500: #22c55e;
  --clr-gray-200: #e5e7eb;
  --clr-gray-800: #1f2937;
}

/* 2. Sémantique par défaut (Admin) */
[data-role="admin"], :root {
  --form-theme-color: var(--clr-red-500);
}

/* Sémantique Modérateur */
[data-role="moderator"] {
  --form-theme-color: var(--clr-blue-500);
}

/* Sémantique Éditeur */
[data-role="editor"] {
  --form-theme-color: var(--clr-green-500);
}

/* 3. Composant */
.admin-input {
  /* Token local pour l'isolation */
  --input-border-color: var(--clr-gray-200);
  --input-accent-color: var(--form-theme-color);

  border: 2px solid var(--input-border-color);
  color: var(--clr-gray-800);
  padding: 10px;
  transition: all 0.3s ease;
}

.admin-input:focus {
  border-color: var(--input-accent-color);
  box-shadow: 0 0 0 2px var(--input-accent-color);
  outline: none;
}