Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Architecture : couches, variables et composants | SovranCode

Contenu du coursCSS — Architecture · 26 leçons

Les bases de CSS

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités CSS — Couleurs CSS — Fonctions CSS — Variables

Boîtes et mise en page

CSS — Modèle de boîte CSS — Display CSS — Positionnement CSS — Z-index et empilement CSS — Flexbox CSS — Grid

Couleurs et typographie

CSS — Arrière-plans CSS — Bordures et ombres CSS — Typographie

Un CSS adaptable et durable

CSS — Media queries CSS — Container queries CSS — Architecture CSS — Accessibilité

États et mouvements

CSS — Pseudo-classes CSS — Pseudo-éléments CSS — Transformations CSS — Transitions CSS — Animations CSS — Débordements

CSS76 min

CSS — Architecture

Organisez les styles pour savoir où intervenir : variables partagées, couches de cascade, sélecteurs de composants simples et utilitaires ciblés. Réduisez les répétitions tout en gardant les priorités CSS compréhensibles.

Un CSS facile à maintenir rend prévisibles la responsabilité de chaque règle et la manière de la remplacer. Les variables nomment les choix visuels partagés, les couches définissent les grandes priorités, les composants regroupent leurs propres styles et les utilitaires répondent à un besoin précis. L’organisation doit réduire les répétitions tout en laissant la cascade lisible.

Repérer les responsabilités et les priorités

Repérez l’ordre des couches, les variables partagées et la règle du composant. Avant de modifier le code, déterminez quelle partie doit porter le changement et pourquoi elle aura la bonne priorité.

@layer reset, base, components, utilities; :root { --space-3: 1rem; --surface: #fff; } @layer components { .notice { padding: var(--space-3); background: var(--surface); } }

Les bons réflexes

Déclarez et documentez l’ordre des couches au point d’entrée de la feuille de style.
Nommez les variables partagées selon leur rôle plutôt que selon un seul composant du moment.
Retirez les déclarations obsolètes et vérifiez les remplacements dans les cas réellement utilisés.

ATELIER CSS · ENVIRON 38 MIN

Réorganiser une feuille de style avec des responsabilités claires

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Rendre l’ordre et les responsabilités visibles

Le point d’entrée d’une feuille de style doit montrer son organisation générale : remise à zéro ou normalisation, styles de base du document, composants et utilitaires ciblés. Les couches de cascade peuvent formaliser cet ordre ; un composant n’a alors pas besoin d’un sélecteur plus fort simplement parce qu’un fichier de base a été chargé plus tard. Déclarez l’ordre des couches avant d’y ajouter des règles. Les déclarations d’auteur normales hors couche ont priorité sur les déclarations normales placées dans des couches : un ancien fichier extérieur à cette organisation peut donc surprendre l’équipe. Cette architecture ne demande pas de multiplier les conteneurs HTML ; la structure doit toujours refléter le contenu et les interactions.

Nommer les choix partagés, pas chaque valeur

Les propriétés personnalisées sont utiles pour les rôles récurrents : couleur du texte, fond, focus, échelle d’espacement ou largeur de lecture. --course-card-blue décrit un usage précis et peut compliquer la réutilisation. --accent ou --surface-selected exprime un rôle plus large, à condition que ce rôle reste cohérent. Une variable locale au composant peut autoriser une variation maîtrisée sans obliger à remplacer toutes ses déclarations. Prévoyez des valeurs de repli lorsqu’un composant peut raisonnablement être utilisé seul. Attendez de voir les usages réels avant de créer des centaines de variables, et documentez le contraste des paires texte-fond plutôt que les couleurs isolées.

Garder des sélecteurs simples et des états explicites

La classe d’un composant définit une frontière de style ; les classes de ses parties ou leurs attributs décrivent les éléments et les états importants. Les longues chaînes de sélecteurs lient le CSS à des détails d’imbrication et rendent le HTML difficile à réorganiser. Un utilitaire doit accomplir une tâche ciblée et garder une priorité prévisible dans les couches. Utilisez les outils de vérification et de comparaison visuelle prévus par le projet, puis vérifiez aussi le clavier, le zoom et les règles devenues inutiles. Recherchez les usages réels avant de supprimer un sélecteur. Les commentaires doivent expliquer les contraintes ou les contournements de navigateur peu évidents, ainsi que les conditions permettant de les retirer.

Prévoir l’impression et les préférences d’affichage

Une feuille de style utilisée en production peut demander des variantes pour l’impression, les couleurs forcées, le contraste ou les mouvements réduits. À l’impression, retirez les commandes sans utilité sur papier, affichez certaines URL utiles, limitez les coupures de blocs lorsque c’est possible et gardez un contraste lisible. Le contenu principal de l’article doit rester disponible. Une règle @supports permet d’ajouter une amélioration lorsqu’une paire propriété-valeur est reconnue, sans garantir tous les détails du résultat. Documentez la prise en charge des navigateurs et les solutions de repli avec les autres règles du composant.

Ajoutez une règle .notice hors de toute couche avec une valeur qui entre en conflit avec celle de components. Examinez pourquoi cette déclaration normale a priorité, puis ouvrez l’aperçu avant impression.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
@layer reset, base, components, utilities;
:root { --ink:#142536; --surface:#eef3f7; --accent:#174986; --space-3:1rem; --measure:65ch; }
@layer reset { *,*::before,*::after { box-sizing:border-box; } }
@layer base { body { margin:0; padding:2rem; color:var(--ink); font:1rem/1.7 system-ui; } :focus-visible { outline:3px solid #b45f00; outline-offset:3px; } }
@layer components { .site-header { display:flex; gap:1rem; margin-bottom:2rem; } .notice { padding:var(--space-3); background:var(--surface); border-inline-start:4px solid var(--accent); } .notice--important { --surface:#e5edff; } }
@layer utilities { .measure { max-inline-size:var(--measure); } }
@media print { .site-header { display:none; } body { padding:0; color:black; background:white; } }
</style>
</head>
<body>
<header class="site-header"><a href="#content">Aller au contenu</a><strong>Carnet d’apprentissage</strong></header><main id="content"><article class="notice notice--important"><h1>Revoir l’organisation des styles</h1><p>Ce composant définit son espacement, son fond et les variations de son état.</p></article><p class="measure">Les variables nommées par rôle et les couches rendent les règles de remplacement compréhensibles.</p></main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
@layer reset, base, components, utilities;
:root { --ink:#142536; --surface:#eef3f7; --accent:#174986; --space-3:1rem; --measure:65ch; }
@layer reset { *,*::before,*::after { box-sizing:border-box; } }
@layer base { body { margin:0; padding:2rem; color:var(--ink); font:1rem/1.7 system-ui; } :focus-visible { outline:3px solid #b45f00; outline-offset:3px; } }
@layer components { .site-header { display:flex; gap:1rem; margin-bottom:2rem; } .notice { padding:var(--space-3); background:var(--surface); border-inline-start:4px solid var(--accent); } .notice--important { --surface:#e5edff; } }
@layer utilities { .measure { max-inline-size:var(--measure); } }
@media print { .site-header { display:none; } body { padding:0; color:black; background:white; } }
</style>
</head>
<body>
<header class="site-header"><a href="#content">Aller au contenu</a><strong>Carnet d’apprentissage</strong></header><main id="content"><article class="notice notice--important"><h1>Revoir l’organisation des styles</h1><p>Ce composant définit son espacement, son fond et les variations de son état.</p></article><p class="measure">Les variables nommées par rôle et les couches rendent les règles de remplacement compréhensibles.</p></main>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

main .page section div.notice h2 { color:blue !important; }

Voir la correction et son explication

@layer base, components;
@layer components { .notice__title { color:var(--notice-title, #174986); } }

La correction donne une classe stable à la partie du composant, utilise l’ordre des couches déclaré et expose une variable de personnalisation ciblée. Elle évite de renforcer un sélecteur fragile avec !important. Vérifiez aussi que la classe .notice__title est présente sur le titre dans votre HTML.

À VOUS DE JOUER

Créer sans recopier l’exemple

Réorganisez les styles d’une page dans des couches reset, base, components et utilities explicites. Définissez quelques variables partagées et ajoutez les variantes d’impression et de mouvements réduits lorsque le contenu le demande.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Réorganiser une feuille de style avec des responsabilités claires — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Réorganiser une feuille de style avec des responsabilités claires</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Réorganiser une feuille de style avec des responsabilités claires — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Réorganiser une feuille de style avec des responsabilités claires</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Une autre personne peut prévoir quelle couche doit recevoir une nouvelle déclaration.Les sélecteurs de composants restent simples et ne dépendent pas de toute la chaîne des conteneurs de la page.Les variables représentent des rôles partagés et leurs paires de contraste sont documentées.L’aperçu avant impression conserve les informations essentielles et ne retire que les commandes sans utilité sur papier.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Pour des déclarations d’auteur normales, qu’est-ce qui a généralement priorité sur les règles placées dans des couches ?Une déclaration normale hors coucheUne valeur héritéeUn style par défaut du navigateur

2. Quelle raison justifie le mieux l’ajout d’une propriété personnalisée ?Elle représente un choix réellement réutilisable ou une variation prévue du composantChaque valeur littérale doit devenir une variableElle empêche la cascade de s’appliquer

Chargement du travail enregistré…

Vos choix de confidentialité

Les bases de CSS

Boîtes et mise en page

Couleurs et typographie

Un CSS adaptable et durable

États et mouvements

CSS — Architecture

Repérer les responsabilités et les priorités

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Réorganiser une feuille de style avec des responsabilités claires

Rendre l’ordre et les responsabilités visibles

Nommer les choix partagés, pas chaque valeur

Garder des sélecteurs simples et des états explicites

Prévoir l’impression et les préférences d’affichage

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris