Que fait la règle *, *::before, *::after { box-sizing: border-box; } dans un CSS Reset ?

Fait en sorte que le padding et la bordure soient comptés dans la largeur de l'élément

Supprime toutes les marges et le padding

Définit display: block sur tous les éléments

Réinitialise les couleurs en noir et blanc

Cours HTML et CSS · Module 11: Outils de développement

Techniques de workflow avancées

7 min de lecture

Dans cette leçon8

Après une semaine de travail, tu ouvres le fichier style.css et tu n'arrives pas à retrouver la règle du titre. Tu as tapé la couleur or à douze endroits, alors quand il faut l'assombrir un peu, tu corriges chaque endroit un par un. Ce n'est pas un manque de connaissances, c'est un manque d'organisation. Chaque pharaon avait un système pour gérer la construction de sa pyramide. En tant que développeur web, toi aussi tu as besoin d'un workflow efficace. Dans cette leçon, tu vas découvrir des techniques supplémentaires qui fluidifieront ton processus de création de pages.

Un ensemble complet de balises meta dans le head

La section <head> est la « fondation » de chaque page. Voici un ensemble complet de balises meta qu'il vaut la peine de coller dans chaque nouveau projet :

1<head>
2  <!-- Encodage des caractères - toujours au début -->
3  <meta charset="UTF-8">
4
5  <!-- Affichage responsive -->
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8  <!-- Titre de la page (apparaît dans l'onglet) -->
9  <title>Musée d'Égypte | Accueil</title>
10
11  <!-- Description pour les moteurs de recherche -->
12  <meta name="description" content="Musée de l'Égypte antique - billets en ligne, expositions, histoire des pharaons.">
13
14  <!-- Auteur de la page -->
15  <meta name="author" content="Mohamed">
16
17  <!-- Couleur du thème du navigateur sur mobile -->
18  <meta name="theme-color" content="#1a1a2e">
19</head>

Deux balises sont nouvelles ici : author indique l'auteur de la page, et theme-color colore la barre du navigateur sur les téléphones aux couleurs de ta marque. Le reste suit le même ordre que dans la leçon sur le favicon et Open Graph.

Les commentaires dans le code

Les commentaires sont les « notes du scribe » dans la marge du papyrus - ils aident tout le monde, toi compris, à comprendre le code. En HTML, tu les commences par  :

1<!-- Ceci est un commentaire HTML - il ne s'affiche pas sur la page -->
2
3<!-- =============================
4     SECTION : Navigation principale
5     Auteur : Mohamed
6     Date : 2024-01-15
7     ============================= -->
8<nav>
9  <!-- Liste des liens de navigation -->
10  <ul>
11    <li><a href="/">Accueil</a></li>
12  </ul>
13</nav>

Le commentaire n'apparaît pas sur la page, mais tout le monde peut le voir dans le code source de la page (Ctrl+U) et dans les DevTools, alors n'y écris jamais de mots de passe. Dans les feuilles de style CSS, un commentaire a une syntaxe complètement différente : il commence par /* et se termine par */ :

1/* Ceci est un commentaire CSS */
2
3/* ============================
4   SECTION : Typographie
5   ============================ */
6h1 { font-size: 2rem; }
7
8/* TODO: Ajouter le responsive pour le mobile */

Attention au piège : la double barre oblique // des commentaires JavaScript n'est pas un commentaire en CSS et peut casser la règle suivante. Le marqueur TODO est un signal convenu, « je reviendrai ici », facile à retrouver ensuite par une recherche.

La structure des fichiers du projet

Un projet bien organisé est la clé du succès. Chaque type de fichier a son propre dossier, comme les réserves d'un complexe de temples :

1<!-- Structure des dossiers : -->
2<!--
3  projet/
4    index.html          - Page d'accueil
5    about.html          - Sous-page "À propos"
6    contact.html        - Sous-page de contact
7    css/
8      style.css         - Feuille de style principale
9      reset.css         - Reset CSS
10    js/
11      script.js         - Script principal
12    images/
13      logo.svg          - Logo
14      hero.jpg          - Image principale
15      favicon.ico       - Icône d'onglet
16    fonts/
17      custom-font.woff2 - Police personnalisée
18-->

La page d'accueil reste dans le dossier racine sous le nom index.html, comme l'exige l'hébergement de la leçon précédente. Écris les noms de fichiers en minuscules, sans espaces ni caractères accentués.

Le squelette de chaque sous-page

Chaque sous-page du projet a le même squelette sémantique, disposé de haut en bas : un en-tête avec la navigation, le contenu principal avec ses sections, et un pied de page :

1<body>
2  <header>
3    <nav>...</nav>
4  </header>
5  <main>
6    <section>...</section>
7    <section>...</section>
8  </main>
9  <footer>...</footer>
10</body>

L'ordre est fixe : <header> avec un <nav> à l'intérieur, puis <main>, et <footer> à la fin. Tu connais ce squelette depuis le module sur l'accessibilité - il devient maintenant le modèle de chaque nouvelle sous-page.

Reset CSS et Normalize

Chaque navigateur applique des styles par défaut (par exemple des marges sur le body ou des tailles de titres). Un CSS Reset ou Normalize uniformise ces styles :

1/* Reset CSS simple */
2*,
3*::before,
4*::after {
5  box-sizing: border-box;
6  margin: 0;
7  padding: 0;
8}
9
10img {
11  max-width: 100%;
12  display: block;
13}
14
15body {
16  min-height: 100vh;
17  line-height: 1.6;
18}

La première règle remet les marges à zéro et définit box-sizing: border-box, si bien que le padding et la bordure sont inclus dans la largeur de l'élément - width: 300px signifie alors vraiment 300 pixels. Plutôt que de tout remettre à zéro, Normalize.css conserve les styles par défaut utiles et corrige seulement les incohérences.

Les variables CSS (Custom Properties)

Les variables CSS permettent de définir des valeurs une seule fois et de les utiliser dans toute la feuille de style - comme le cartouche d'un pharaon qui, une fois défini, apparaît à de nombreux endroits du temple :

1:root {
2  --color-primary: #1a1a2e;
3  --color-accent: #d4af37;
4  --color-text: #333;
5  --font-main: 'Georgia', serif;
6  --spacing-sm: 0.5rem;
7  --spacing-md: 1rem;
8  --spacing-lg: 2rem;
9}
10
11body {
12  font-family: var(--font-main);
13  color: var(--color-text);
14}
15
16h1 {
17  color: var(--color-accent);
18  margin-bottom: var(--spacing-md);
19}

On définit les variables CSS avec le préfixe -- et on les lit avec la fonction var(). Leurs principaux avantages :

Un seul endroit à modifier - changer la valeur d'une variable la met à jour partout
Lisibilité - var(--color-accent) est plus compréhensible que #d4af37
Thèmes - tu crées facilement un mode sombre ou clair en ne changeant que les variables

Ne les confonds pas avec Sass : $color est une variable de préprocesseur, connue uniquement pendant la compilation, alors que les variables CSS fonctionnent dans le navigateur et peuvent changer, par exemple dans la media query du mode sombre.

Favicon - l'icône d'onglet

Chaque page professionnelle a besoin d'une icône d'onglet. Rappelle-toi l'ensemble vu dans la leçon sur le favicon, cette fois avec une version SVG :

1<head>
2  <!-- Favicon classique -->
3  <link rel="icon" type="image/x-icon" href="/favicon.ico">
4
5  <!-- Favicon SVG (navigateurs modernes) -->
6  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
7
8  <!-- Icône pour les appareils Apple -->
9  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
10</head>

Les navigateurs qui prennent en charge le SVG peuvent utiliser l'icône vectorielle, nette à toutes les tailles, tandis que les plus anciens s'en tiendront au fichier .ico.

Les bonnes pratiques d'organisation du CSS

Organise ton CSS en sections logiques - comme un scribe qui range les hiéroglyphes en colonnes. L'ordre des sections va du général au particulier :

1/* ============================
2   1. RESET / NORMALIZE
3   ============================ */
4*, *::before, *::after {
5  box-sizing: border-box;
6  margin: 0;
7  padding: 0;
8}
9
10/* ============================
11   2. VARIABLES CSS
12   ============================ */
13:root {
14  --color-primary: #1a1a2e;
15  --color-accent: #d4af37;
16}
17
18/* ============================
19   3. TYPOGRAPHIE
20   ============================ */
21body { font-family: 'Georgia', serif; }
22h1, h2, h3 { font-weight: 700; }
23
24/* ============================
25   4. LAYOUT
26   ============================ */
27.container { max-width: 1200px; margin: 0 auto; }
28
29/* ============================
30   5. COMPOSANTS
31   ============================ */
32.card { border: 1px solid #ddd; padding: 1rem; }
33.button { padding: 0.5rem 1rem; cursor: pointer; }
34
35/* ============================
36   6. MEDIA QUERIES
37   ============================ */
38@media (max-width: 768px) {
39  .container { padding: 0 1rem; }
40}

Cette structure permet même à une grande feuille de style de rester lisible et facile à maintenir. Les media queries se trouvent à la fin, car à spécificité égale, c'est la règle écrite en dernier qui l'emporte. Comme aimait à le dire Mohamed : « Un code bien organisé, c'est comme un chantier de pyramide bien géré - chaque bloc a sa place ! »

Mon conseil : commence chaque projet par les mêmes étapes - les dossiers, le reset, les variables. Dans le projet final, tu les combineras avec un favicon, des polices et des images.

Pratique

Dans l'éditeur ci-dessous, tu trouveras une page construite selon ces règles. Change la valeur de --color-accent et regarde combien d'endroits changent d'un coup :

Code de cette leçon : index.html

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Workflow avancé</title>
7    <meta name="description" content="Pratique de techniques de workflow avancées">
8    <meta name="author" content="Mohamed">
9    <meta name="theme-color" content="#1a1a2e">
10    <link rel="stylesheet" href="style.css">
11</head>
12<body>
13    <h1>Techniques de workflow avancées</h1>
14
15    <!-- =============================
16         SECTION : Variables CSS
17         ============================= -->
18    <section>
19        <h2>Variables CSS (Custom Properties)</h2>
20        <div class="demo-vars">
21            <div class="color-swatch primary">--color-primary</div>
22            <div class="color-swatch accent">--color-accent</div>
23            <div class="color-swatch bg">--color-bg</div>
24        </div>
25        <p>Les variables CSS permettent de définir des valeurs une seule fois
26           et de les utiliser dans toute la feuille de style.</p>
27    </section>
28
29    <!-- =============================
30         SECTION : CSS Reset
31         ============================= -->
32    <section>
33        <h2>CSS Reset</h2>
34        <p>Cette page utilise un CSS Reset simple,
35           qui uniformise les styles par défaut des navigateurs :</p>
36        <ul>
37            <li><code>box-sizing: border-box</code> sur tous les éléments</li>
38            <li><code>margin: 0; padding: 0</code> - réinitialisation des marges</li>
39            <li><code>img { max-width: 100% }</code> - images responsives</li>
40        </ul>
41    </section>
42
43    <!-- =============================
44         SECTION : Commentaires
45         ============================= -->
46    <section>
47        <h2>Les commentaires dans le code</h2>
48        <p>Regarde le code source de cette page - chaque section
49           est décrite par un commentaire HTML.</p>
50        <p>De bons commentaires aident à comprendre
51           la structure du code et le but de chaque section.</p>
52    </section>
53</body>
54</html>

Souviens-toi : l'ordre sur le chantier, c'est la moitié de la pyramide - des dossiers, des sections et des variables bien nommés t'épargneront des heures de recherche.

Tu as repéré une erreur dans cette leçon ?

Teste tes connaissances

Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.

1. Comment référence-t-on une variable CSS définie comme --color-accent: #d4af37 ?
2. Que fait la règle *, *::before, *::after { box-sizing: border-box; } dans un CSS Reset ?

Voici 2 des 3 questions de cette leçon. Réponds aux autres dans le jeu.

Tâches pratiques dans le jeu

Éditeur de code
Définis des variables CSS dans :root et utilise-les à la place des valeurs codées en dur dans les styles.
Tri vertical
Remets les sections sémantiques d'une page HTML dans l'ordre, de haut en bas :
Éditeur de code
Crée une page complète avec un header, un main (2 sections) et un footer.
Tri horizontal
Comment définis-tu une variable CSS dans :root ?
Clique dans l'ordre
Comment écris-tu un commentaire dans du code HTML ?
Tri horizontal
À quoi ressemble un commentaire dans du code CSS ?
Clique dans l'ordre
Comment utilises-tu une variable CSS dans la propriété color ?
Éditeur de code
Crée une page de musée complète avec des balises meta, un favicon, Google Fonts, des images en lazy loading et des variables CSS.