Organisation des fichiers : ITCSS et modèle 7-1

À mesure que les projets grandissent, un seul fichier CSS devient ingérable. Les structures d’organisation aident les équipes à répartir le CSS en couches logiques, chargées dans le bon ordre et faciles à parcourir.

ITCSS organise le CSS en couches classées par spécificité croissante. À l’image d’un triangle inversé, les règles les plus larges (les plus génériques) se trouvent en haut, et les plus spécifiques en bas. Cette organisation respecte la cascade naturelle.

Les 7 couches d’ITCSS (de la plus générique à la moins générique) :

1. Paramètres — variables et jetons de conception
2. Outils — mixins et fonctions
3. Générique — réinitialisation/normalisation
4. Éléments — styles de base des éléments HTML
5. Objets — abstractions de mise en page (sans styles visuels)
6. Composants — composants d’interface
7. Utilitaires — surcharges et assistants ; !important est autorisé ici

Structure type des fichiers ITCSS :

Le modèle 7-1 organise Sass en 7 dossiers et 1 fichier principal qui importe tout :

• abstracts/ — variables, fonctions et mixins
• base/ — réinitialisation, typographie et éléments de base
• components/ — boutons, cartes et fenêtres modales
• layout/ — en-tête, pied de page, barre latérale et grille
• pages/ — styles propres à chaque page
• themes/ — thèmes multiples
• vendors/ — CSS tiers

Un fichier principal main.scss importe toutes les feuilles partielles dans l’ordre :

Les @layer de CSS moderne offrent les mêmes avantages de classement de la cascade qu’ITCSS, sans préprocesseur. Les couches sont déclarées une seule fois et leur priorité reste fixe, quel que soit l’ordre dans le code source.

Une solution différente des fichiers de styles centralisés consiste à co-localiser le CSS du composant à côté du fichier du composant. Cette approche est courante dans les projets React/Vue qui utilisent des modules CSS ou du CSS-in-JS.

Les fichiers partiels Sass commencent par un trait de soulignement (_button.scss). Ce trait indique à Sass que le fichier ne doit pas être compilé indépendamment : il doit être importé dans un fichier principal.

Si vous n’utilisez pas Sass, PostCSS avec le module @import ou le @import natif de CSS associé à @layer permet d’obtenir la même organisation des fichiers sans préprocesseur.

Que vous utilisiez ITCSS, le modèle 7-1 ou des fichiers co-localisés, chaque composant doit avoir son propre fichier. Nommez le fichier d’après le composant qu’il met en forme : _card.scss, button.css, Nav.module.css.

Dans ITCSS, quelle couche se trouve tout en haut du triangle inversé (la plus large et la moins spécifique) ?

ITCSS classe les couches CSS de la plus générique à la plus spécifique en suivant la cascade. Le modèle 7-1 organise Sass en 7 dossiers importés par un seul fichier principal. Les @layer de CSS moderne offrent nativement le même contrôle de la cascade. Que les fichiers soient centralisés ou co-localisés, le principe essentiel est le suivant : un fichier par composant et des importations toujours ordonnées de manière cohérente.