Formation Apprendre le CSS : Bien organiser son CSS

Dans ce chapitre, on va s'intéresser à un problème que l'on rencontre assez rapidement quand on commence à appliquer le CSS : comment s'organiser ?

Commencer par les fondations

Une bonne première étape consiste à poser les bases du projet.

Définir les variables CSS

La première chose à faire est de lister les variables globales utilisées par le design.

:root {
  --text: #1f2937;
  --background: #ffffff;
  --primary: #2e5f3e;
  --font-sans: "Inter", sans-serif;
  --font-serif: "Merriweather", serif;
}

Prévoir les layers

Ensuite on va définir les calques calques que l'on va utiliser pour ne pas se faire piéger par la priorité :

@layer reset, base, layout, components, modules, utilities;

Cette hiérarchie donne un cadre clair au CSS et évite beaucoup de conflits plus tard.

Une organisation par dossiers

Ensuite, en suivant la même logique que nos calques on va séparer notre CSS en plusieurs fichiers. Par exemple :

css/
  base/
    reset.css
    typography.css
    colors.css
  layout/
    layout.css
  components/
    btn.css
    card.css
  modules/
    header.css
    footer.css
    newsletter.css
  utilities/
    visibility.css
  style.css

Notre fichier principal style.css ne sert plus qu'à venir importer les autres feuille de style et à définir les variables.

@layer reset, base, layout, components, modules, utilities;

@import "base/reset.css" layer(reset);
@import "base/typography.css" layer(base);
@import "base/colors.css" layer(base);
@import "layout/layout.css" layer(layout);
@import "components/btn.css" layer(components);
@import "components/card.css" layer(components);
@import "modules/header.css" layer(modules);
@import "utilities/visibility.css" layer(utilities);

:root {
  --text: #1f2937;
  --background: #ffffff;
  --primary: #2e5f3e;
  --font-sans: "Inter", sans-serif;
  --font-serif: "Merriweather", serif;
}

• Le dossier base regroupe les styles fondamentaux du projet (le reset, la typographie...)
• Le dossier layout contient les styles liés à la structure de la page (styles de conteneurs, grilles et autre style de section génériques).
• Le dossier components contient les styles de blocs réutilisables (comme les boutons, les badges, les formulaires...).
• Le dossier modules regroupe des sections plus larges, liées à une page ou à une zone précise du site (comme le header, footer, bloc newsletter...)
• Le dossier utilities contient des classes très ciblées, conçues pour faire une chose précise

Par exemple :

.hidden {
  display: none;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
}

Ou encore des utilitaires responsives :

.desktop-only {
  display: none;
}

@media (min-width: 700px) {
  .desktop-only {
    display: block;
  }
}

Nommer ces classes

L'autre grand sujet, c'est le nommage des classes. Une convention que j'aime bien est l'approche BEM qui peut se résumer de la manière suivante :

• un bloc principal
• des éléments internes avec __
• des modificateurs avec --

Par exemple :

.btn {
}
.btn--fill {
}
.btn--border {
}
.btn--large {
  /* Un style de bouton plus gros */
}
.btn__icon {
  /* l'icône dans un bouton */
}

Puis dans le HTML :

<button class="btn btn--fill btn--large">
  <svg class="btn__icon"></svg>
  Envoyer
</button>

Cette convention apporte plusieurs avantages :

• les classes deviennent plus prévisibles
• on comprend vite le rôle de chaque morceau
• le nommage demande moins d'improvisation

Mais il faut accepter une certaine verbosité (et la présence de -- ou __ ne conviendra pas à tout le monde).