Comment organiser le CSS dans les projets web modernes

Le CSS est facile à écrire mais difficile à maintenir. Quelques centaines de lignes semblent gérables jusqu’à ce que, six mois plus tard, vous ayez peur de modifier quoi que ce soit parce que vous ne savez pas ce qui va casser. Le problème n’est pas le CSS lui-même — c’est l’absence de structure.

Voici une approche pratique de l’organisation du CSS qui passe à l’échelle, reste lisible et fonctionne avec les outils modernes.

Commencer par une structure de couches claire

La décision la plus importante dans l’architecture CSS est de contrôler où vivent les styles et dans quel ordre ils s’appliquent. Les couches de cascade CSS natives (@layer) rendent cela explicite.

@layer reset, tokens, base, components, utilities;

Déclarer les couches dès le départ signifie que les couches ultérieures l’emportent sur les précédentes — quelle que soit la spécificité. Fini le combat contre la cascade avec des sélecteurs de plus en plus spécifiques ou des hacks !important.

Un ordre de couches pratique :

• reset — normaliser les valeurs par défaut du navigateur
• tokens — propriétés personnalisées CSS (vos design tokens)
• base — styles au niveau des éléments (body, h1, a)
• components — styles d’interface utilisateur avec portée définie
• utilities — surcharges à usage unique

Cette structure vous donne une spécificité prévisible et un modèle mental clair pour savoir où appartient n’importe quel style donné.

Les design tokens appartiennent aux fondations

Les design tokens sont des valeurs nommées pour les couleurs, l’espacement, la typographie et d’autres décisions de design. Définis comme propriétés personnalisées CSS, ils créent une source unique de vérité dans l’ensemble de votre base de code.

:root {
  --color-primary: oklch(55% 0.2 250);
  --space-md: 1rem;
  --font-body: "Inter", sans-serif;
}

Organisez les tokens du primitif au sémantique :

• Primitif : --blue-500: oklch(55% 0.2 250)
• Sémantique : --color-action: var(--blue-500)
• Composant : --btn-bg: var(--color-action)

Cette hiérarchie signifie que vous pouvez changer le thème d’un projet entier en modifiant les tokens sémantiques, sans avoir à chercher dans les styles de composants.

Stylisation basée sur les composants : délimitez vos styles

Les feuilles de style globales gèrent les styles de base. Les composants gèrent tout le reste. Le principe clé : co-localisez les styles avec le composant auquel ils appartiennent.

CSS Modules est la façon la plus simple d’y parvenir dans React, Vue ou tout projet basé sur un bundler. Chaque fichier .module.css a une portée locale par défaut — les noms de classes sont transformés en identifiants uniques au moment de la compilation, de sorte que .button dans un composant n’entre jamais en collision avec .button dans un autre.

/* Button.module.css */
.button {
  background: var(--btn-bg);
  padding: var(--space-sm) var(--space-md);
}

L’imbrication CSS native (désormais prise en charge dans tous les navigateurs modernes) réduit également le besoin de préprocesseurs dans les styles de composants :

.card {
  padding: var(--space-md);

  & .card-title {
    font-size: 1.25rem;
  }
}

Limitez l’imbrication — deux niveaux suffisent généralement. Une imbrication profonde recrée les problèmes de spécificité que vous essayiez d’éviter.

Native @scope est désormais largement disponible, mais dans le code applicatif, elle reste moins courante que CSS Modules ou la portée au niveau du framework, donc considérez-la comme une option émergente plutôt qu’un choix par défaut.

CSS utilitaire d’abord : où se situe Tailwind v4

Tailwind CSS v4 adopte une approche différente : au lieu d’écrire du CSS de composant, vous composez les styles directement dans le balisage en utilisant des classes utilitaires. La version 4 passe à un modèle de configuration CSS-first — vous configurez Tailwind dans un fichier CSS en utilisant @theme, et non dans une config JavaScript.

@import "tailwindcss";

@theme {
  --color-primary: oklch(55% 0.2 250);
}

Tailwind fonctionne bien pour les équipes qui souhaitent une itération rapide et des contraintes de design cohérentes. Le compromis est un balisage verbeux et des noms de classes moins sémantiques. De nombreuses équipes utilisent une approche hybride : les utilitaires Tailwind pour la mise en page et l’espacement, CSS Modules ou les propriétés personnalisées pour la logique complexe des composants.

Une structure de fichiers pratique

Pour la plupart des projets, cette structure passe bien à l’échelle :

styles/
  index.css        ← imports uniquement, déclare l'ordre @layer
  tokens.css       ← design tokens
  reset.css        ← normalisation du navigateur
  base.css         ← styles d'éléments
  utilities.css    ← classes d'aide

components/
  Button/
    Button.jsx
    Button.module.css

Les styles globaux vivent dans styles/. Les styles de composants vivent à côté du composant. Rien ne déborde de cette frontière sans bonne raison.

Conclusion

Une bonne organisation du CSS se résume à quelques habitudes cohérentes : déclarez votre ordre de couches tôt, définissez les design tokens à la racine, délimitez les styles de composants localement et gardez les sélecteurs peu profonds. Vous n’avez pas besoin d’une méthodologie rigide — vous avez besoin de conventions claires que toute votre équipe comprend et suit.

Commencez simplement. N’ajoutez de la structure que lorsque le projet l’exige.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..