PD-228 — Rétrospective¶

1. Contexte¶

2. Métriques¶

3. Learnings clés¶

• Définir des tokens ne suffit pas : Sans garde-fou (stylelint), les développeurs contourneront les tokens par commodité ou ignorance.

• Gradients CSS nécessitent une approche spécifique : Les tokens de couleurs seuls ne couvrent pas les cas avec opacité ou transitions. Créer des tokens de gradients complets.

• Fichier unique peut devenir un monolithe : La structure modulaire prévue (tokens/, base/, components/) facilite la maintenance et devrait être implémentée dès le départ.

• Migration vers un design system est coûteuse : Appliquer les tokens dès la création des composants est plus efficace que de les migrer après coup.

• Fichiers legacy sont des pièges : Un ancien fichier CSS non aligné crée de la confusion et un risque d'incohérence.

4. Patterns applicables¶

Nouveau pattern : Structure modulaire CSS tokens¶

src/styles/
├── tokens/
│   ├── colors.css
│   ├── spacing.css
│   └── typography.css
├── base/
│   └── reset.css
└── components/
    └── button.css

Nouveau pattern : Stylelint strict tokens¶

{
  "rules": {
    "color-no-hex": true,
    "declaration-property-value-allowed-list": {
      "padding": ["/var\\(--spacing-/"],
      "margin": ["/var\\(--spacing-/"]
    }
  }
}

5. Signal CLAUDE.md¶

Priorité haute : Linting CSS obligatoire.

### Design System — Linting CSS (2026-02-XX)

Tout projet avec design system DOIT avoir stylelint configuré avec :
- `color-no-hex: true` → force l'utilisation des tokens de couleur
- Règles d'espacement → force `var(--spacing-*)`

**Installer AVANT d'écrire le premier composant**, pas après.

6. Conclusion¶

PD-228 a établi le design system CSS avec tokens. Les 4 écarts (couleurs hardcodées, espacements bruts, structure monolithique, legacy CSS) ont révélé l'importance d'installer le linting dès le départ et de nettoyer les fichiers legacy. L'architecture modulaire est désormais standard.

Rétrospective générée 2026-02-19 (Étape 10 batch site-vitrine)