Front-end · 6 mondes · 18 étapes

HTML & CSS

Structurer et styliser une page web, directement dans le navigateur.

Progression

0 %

0/18 étapes terminées

← Maîtrise avancée

Avancé · 12 min de lecture

Le CSS d'un vrai projet

Organisation, conventions et performance

1Définition

Au-delà d'une page, le CSS devient un système : des variables pour la charte, des composants nommés de façon prévisible, des fichiers séparés et mis en cache, et quelques règles de performance. C'est ce qui permet à plusieurs personnes de travailler sur le même site sans se marcher dessus.

2Principes fondamentaux

Des jetons de conception

Couleurs, espacements, rayons et tailles déclarés en variables sur :root. Personne n'écrit plus de valeur « au hasard ».

Des classes qui décrivent un composant

Une convention comme .carte, .carte__titre, .carte--mise-en-avant (BEM) évite les collisions et dit où chaque règle s'applique.

Un fichier, mis en cache

<link rel="stylesheet" href="styles.css"> : le navigateur télécharge la feuille une fois pour tout le site.

Les frameworks utilitaires

Tailwind CSS remplace les feuilles par des classes utilitaires (p-4, flex, gap-4). C'est le choix de ce site — et il ne dispense pas de comprendre ce qu'il y a dessous.

3Exemples pratiques

Des jetons de conception

Exemple

1:root {2  --couleur-marque: #ee6900;3  --couleur-fond: #ece4d4;4  --espace-1: 4px;5  --espace-2: 8px;6  --espace-4: 16px;7  --rayon: 12px;8}9 10.carte {11  padding: var(--espace-4);12  border-radius: var(--rayon);13}

Un espacement de 13 px n'existe plus : on choisit dans une échelle. L'interface devient cohérente par construction.

Mode sombre en quelques lignes

Exemple

1@media (prefers-color-scheme: dark) {2  :root {3    --couleur-fond: #1d1e20;4    --couleur-texte: #ece5d3;5  }6}

Toute l'interface lit les variables : redéfinir les variables suffit à changer de thème.

4Erreurs courantes

Des valeurs magiques

À éviter

.bloc { margin-top: 13px; }

À faire

.bloc { margin-top: var(--espace-4); }

Pourquoi : Chaque valeur isolée est une petite incohérence ; mille valeurs isolées font une interface bancale.

Un sélecteur profond

À éviter

main div ul li a span { … }

À faire

.menu__lien { … }

Pourquoi : Un sélecteur profond casse au premier changement de structure et est très difficile à surcharger.

5Subtilités à connaître

◆Les propriétés transform et opacity s'animent sans recalculer la mise en page : ce sont les seules à animer si l'on veut de la fluidité.
◆font-display: swap affiche le texte avec une police de secours pendant le chargement de la police web.
◆Les requêtes de conteneur (@container) adaptent un composant à la largeur de son parent, et non plus à celle de l'écran.

6Techniques d'expert

Les outils de développement

Inspecter un élément montre les règles appliquées, celles qui sont écrasées, et le modèle de boîte calculé. C'est l'outil numéro un du débogage CSS.

Typographie fluide

clamp() fait varier une taille entre deux bornes selon la largeur de l'écran, sans media query.

h1 {  font-size: clamp(1.8rem, 4vw + 1rem, 3.5rem);}

Respecter les préférences

Réduire les animations pour qui le demande est une ligne de CSS.

@media (prefers-reduced-motion: reduce) {  * {    transition: none;    animation: none;  }}

7Sur le terrain

Les systèmes de conception des grandes entreprises sont avant tout des listes de jetons et de composants nommés.
La plupart des régressions visuelles viennent de sélecteurs trop larges ou trop profonds, modifiés sans voir leurs autres cibles.
L'accessibilité est une obligation légale pour de nombreux services publics et privés : elle se conçoit dès le HTML, pas en fin de projet.

8Vérifie ta compréhension

Question 1/3

Score 0

Pourquoi des variables pour les espacements ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.