<aside> 📝

Simplifier un CSS qui répète les mêmes déclarations partout, en s’appuyant sur l’héritage et sans changer le rendu.

</aside>

1. Cloner le repository

Le repository de l’exercice vous est distribué via classroom50. Acceptez le devoir, puis clonez le repository dans VS Code en suivant la documentation :

Classroom50

Installez ensuite les dépendances et lancez le serveur de développement, en suivant les sections « Reprendre un projet cloné » et « Lancer le serveur de développement » :

NPM et Parcel

2. Simplifier le CSS

Le site est terminé et s’affiche correctement. Son style.css, en revanche, répète les mêmes déclarations sur presque chaque sélecteur : font-family sept fois, line-height sept fois, la même couleur blanche quatre fois.

Ces propriétés sont héritables : déclarées sur un élément, elles descendent dans tout ce qu’il contient. Une déclaration sur body couvre donc toute la page, et une règle plus précise reprend la main là où le style change.

Dans src/style.css, supprimez ces répétitions. Le rendu doit rester identique à la maquette : https://www.figma.com/design/JgvarZs2S4LgjOMJx7BsCj/M2-E3?node-id=2-2&t=jhhqQRXE4jSoVcMh-1

Avancez une propriété à la fois, en rechargeant la page à chaque étape : d’abord font-family, puis font-size, line-height et color. Au total, le fichier devrait perdre une quinzaine de lignes.

<aside> ☝

Tout ne s’hérite pas, et un élément de la page résiste même complètement à l’héritage. Gardez la maquette ouverte à côté du navigateur pour repérer ce qui casse.

</aside>

3. Rendu

Faites un commit après chaque propriété factorisée, puis un push.

C’est votre push qui fait office de rendu. Vérifiez sur classroom50 que votre dernier commit est bien arrivé.