Architecture CSS & design tokens

Objectifs

  • Maîtriser : tokens
  • Maîtriser : BEM ou utilitaires
  • Maîtriser : dette CSS

Cours

Cette leçon fait partie du parcours annuel Code Academy Alfred. Objectif : comprendre tokens, BEM ou utilitaires, dette CSS en conditions réelles de conception web / web mobile.

Les design tokens (couleur, rayon, ombre, spacing) centralisent la cohérence — comme nos variables --ink, --teal.

Deux écoles modernes : composants scoped (CSS modules) ou utilitaires (Tailwind). Les deux sont valides ; Next.js adore Tailwind.

Checkpoint mois 2 : une landing responsive, contrastée, sans tableau de layout, avec focus clavier visible.

Mets en pratique immédiatement : recrée l’exemple, puis modifie-le. La mémorisation vient de la répétition active, pas de la lecture passive.

Si tu bloques, utilise Cursor avec un prompt précis (contexte + objectif + contraintes), puis explique toi-même le diff généré.

Évaluation

Évaluation

1. Quel est le sujet principal de « Architecture CSS & design tokens » ?