Aller au contenu

Système de design

Un système de design est un ensemble de décisions réutilisables — couleurs, espacements, typographie, modèles de composants — qui maintiennent la cohérence de votre site. CSS vous fournit les outils pour en construire un, et le Style Manager vous permet de l'appliquer visuellement.

Deux choses à retenir :

  • Les classes sont vos briques de base. Une classe bien nommée peut être réutilisée sur n'importe quel élément, n'importe quelle page.
  • Les variables CSS sont votre source de vérité. Changez une variable une seule fois, et chaque élément qui l'utilise se met à jour.

Commencer avec les variables CSS

Avant de styliser quoi que ce soit, définissez vos valeurs fondamentales. Ouvrez le panneau Variables CSS dans la barre latérale gauche et créez des variables pour :

Couleurs : - --color-primary — votre couleur de marque - --color-secondary — couleur d'accent - --color-text — couleur de texte par défaut - --color-background — arrière-plan de la page - --color-surface — arrière-plans des cartes/sections - --color-border — bordures subtiles

Espacements : - --space-xs — 4px - --space-sm — 8px - --space-md — 16px - --space-lg — 32px - --space-xl — 64px

Typographie : - --font-heading — famille de polices pour les titres - --font-body — famille de polices pour le texte courant - --font-size-base — taille de texte de base (par exemple, 16px) - --font-size-lg — texte de grande taille - --font-size-sm — texte de petite taille

Désormais, chaque style que vous écrivez référence ces variables au lieu de valeurs codées en dur. Besoin d'ajuster la couleur de marque ? Changez --color-primary une seule fois. Consultez Variables CSS pour le guide complet.

Nommer les classes avec BEM

BEM (Block, Element, Modifier) vous offre une convention de nommage prévisible :

  • Block — un composant autonome : .card, .nav, .hero
  • Element — une partie d'un bloc : .card__title, .card__image, .card__body
  • Modifier — une variation : .card--featured, .card--compact

Dans le Style Manager, tapez votre nom de classe dans le champ de sélecteur. Les noms BEM sont longs mais auto-documentés — .card__title--large vous dit exactement ce qu'il stylise et où.

Pourquoi BEM ? - Pas de collisions de noms — .card__title ne stylisera pas accidentellement un titre ailleurs - Facile à trouver — cherchez .card et vous trouvez tout ce qui concerne les cartes - Fonctionne avec les Symboles — un Symbole avec des classes BEM reste cohérent entre les instances

Construire des classes de composants réutilisables

Un système de design n'est pas que des variables — ce sont des modèles. Voici comment construire un composant de carte réutilisable :

  1. Ajoutez un Div au canevas — c'est le bloc de la carte
  2. À l'intérieur : une Image (.card__image), un Titre (.card__title), un Paragraphe (.card__body)
  3. Sélectionnez le Div extérieur, ajoutez la classe .card
  4. Stylisez .card :
  5. Background-color : var(--color-surface)
  6. Border-radius : 8px
  7. Padding : var(--space-md)
  8. Display : flex, Flex-direction : column, Row-gap : var(--space-sm)
  9. Stylisez .card__title : Font-family var(--font-heading), Font-size var(--font-size-lg)
  10. Stylisez .card__body : Color var(--color-text)

Dupliquez maintenant la carte sur les pages. Chaque instance utilise les mêmes classes, les mêmes variables. Changez --color-surface et toutes les cartes se mettent à jour.

Classes utilitaires pour les modèles courants

Au-delà des composants, créez de petites classes utilitaires pour les modèles répétés :

  • .text-center — Text-align : center
  • .visually-hidden — masquage accessible (pour les lecteurs d'écran)
  • .container — largeur maximale avec marges automatiques pour un contenu de page centré
  • .flex-row — Display : flex, direction en ligne par défaut
  • .flex-col — Display : flex, Flex-direction : column
  • .gap-md — Column-gap et Row-gap : var(--space-md)

Appliquez plusieurs classes à un seul élément : sélectionnez-le, tapez la première classe, puis ajoutez-en une autre dans le champ de sélecteur. L'élément hérite des styles de toutes ses classes.

Combiner Symboles et classes

Les Symboles gèrent la structure (en-tête, pied de page, navigation partagés). Les classes gèrent le style. Ensemble, ils forment votre système de design :

  • Symbole d'en-tête avec les classes .site-header, .site-header__logo, .site-header__nav
  • Symbole de pied de page avec les classes .site-footer, .site-footer__links
  • Modèle de carte — pas un Symbole (le contenu diffère par instance), mais tous partagent les classes .card

Règle d'or : si la structure et le contenu sont identiques entre les pages, utilisez un Symbole. Si seul le style est partagé, utilisez des classes.

Maintenir la cohérence entre les points de rupture

Votre système de design doit fonctionner à chaque taille d'écran. Deux stratégies :

  1. Des variables qui s'adaptent. Définissez --space-lg comme 32px sur ordinateur, puis surchargez-la à 16px au point de rupture mobile. Chaque élément utilisant var(--space-lg) s'adapte automatiquement. Voir points de rupture.

  2. Des classes de composants qui s'adaptent. Une grille .card qui utilise Flex-wrap avec des cartes à largeur fixe s'adapte sans aucun style spécifique aux points de rupture — les cartes passent simplement à la ligne avec moins de colonnes. Voir Flexbox.

Exemple pratique : système de design pour un site d'agence

Mettons en place un système pour le tutoriel de site complet :

1. Définir les variables : - Couleurs : --color-primary: #2563eb, --color-text: #1e293b, --color-background: #ffffff, --color-surface: #f8fafc - Espacements : xs à xl (échelle de 4px à 64px) - Polices : --font-heading: 'Inter', sans-serif, --font-body: 'Inter', sans-serif

2. Créer les classes de composants : - .site-header — flex en ligne, space-between, centré, padding var(--space-md) - .hero — flex en colonne, centré, padding var(--space-xl), arrière-plan var(--color-primary), texte blanc - .card — arrière-plan surface, coins arrondis, flex en colonne, espacement - .section — padding var(--space-xl) en haut et en bas, conteneur à largeur maximale

3. Convertir les éléments partagés en Symboles : - En-tête → Symbole (réutilisé sur chaque page) - Pied de page → Symbole

4. Tester à chaque point de rupture : - Ordinateur : grille de cartes à 3 colonnes, hero complet - Tablette : cartes à 2 colonnes, padding du hero réduit - Mobile : cartes à 1 colonne, navigation empilée

Erreurs courantes

  • Coder en dur les couleurs et les tailles. Chaque valeur devrait référencer une variable CSS. Si vous tapez directement #2563eb, vous devrez le rechercher et le remplacer partout plus tard.
  • Nommer les classes d'après l'apparence. .blue-box casse lorsque vous changez de marque. Nommez les classes d'après leur fonction : .card, .highlight, .alert.
  • Trop de classes ponctuelles. Si vous avez .hero-title-special-homepage, vous ne réutilisez pas assez. Composez à partir de classes existantes.
  • Oublier de tester sur tous les points de rupture. Un système qui ne fonctionne que sur ordinateur n'est pas un système.
  • Mélanger Symboles et classes pour le mauvais cas d'usage. Les Symboles synchronisent la structure. Les classes synchronisent le style. Ne faites pas tout en Symbole.

En savoir plus

Quiz

Q1 : Vous souhaitez changer votre couleur de marque sur l'ensemble du site. Quel est le moyen le plus rapide ?

  • A) Rechercher et remplacer le code hexadécimal dans chaque classe
  • B) Changer la variable CSS --color-primary
  • C) Modifier chaque élément individuellement dans le Style Manager
Réponse

B) Changer la variable CSS --color-primary — chaque élément utilisant var(--color-primary) se met à jour automatiquement. C'est tout l'intérêt de définir les variables en premier.

Q2 : Vous avez un composant de carte utilisé sur 3 pages. Le contenu est différent sur chaque page mais le style est le même. Devriez-vous utiliser un Symbole ?

  • A) Oui, les Symboles maintiennent la cohérence du style
  • B) Non, utilisez plutôt des classes CSS partagées
  • C) Utilisez à la fois un Symbole et des classes
Réponse

B) Non, utilisez plutôt des classes CSS partagées — Les Symboles synchronisent la structure et le contenu. Puisque le contenu diffère par page, les classes sont le bon outil pour partager le style.

Q3 : Que vous indique le nom de classe BEM .card__title--large ?

  • A) Une carte avec un grand titre qui est un composant séparé
  • B) L'élément titre à l'intérieur d'un bloc carte, avec une variation "large"
  • C) Un titre qui est plus grand qu'une carte
Réponse

B) L'élément titre à l'intérieur d'un bloc carte, avec une variation "large" — card est le bloc, __title est l'élément, --large est le modificateur.

Q4 : Vos espacements semblent incohérents sur le site. Que devriez-vous faire ?

  • A) Définir des variables CSS d'espacement (--space-sm, --space-md, etc.) et les utiliser partout
  • B) Définir la même valeur en pixels sur chaque élément
  • C) Utiliser l'espacement par défaut du navigateur
Réponse

A) Définir des variables CSS d'espacement et les utiliser partout — une échelle d'espacement assure la cohérence. Lorsque vous devez ajuster, changez la variable une seule fois.

Q5 : Vous souhaitez que votre grille de cartes affiche automatiquement moins de colonnes sur mobile sans écrire de styles spécifiques aux points de rupture. Comment faire ?

  • A) Utiliser CSS Grid avec auto-fit
  • B) Utiliser Flexbox avec Flex-wrap et des cartes à largeur fixe
  • C) Créer des mises en page séparées pour chaque point de rupture
Réponse

B) Utiliser Flexbox avec Flex-wrap et des cartes à largeur fixe — les cartes passent à la ligne suivante lorsqu'il n'y a pas assez d'espace. Aucun point de rupture n'est nécessaire pour ce comportement responsive de base.

Éditer cette page sur GitLab