Pour pouvoir charger une page sur le web, les navigateurs respectent un ordre bien précis : en premier le HTML, qui va déterminer les fondations de votre page web, puis le CSS pour le style.
Si pour le HTML la tâche reste simple, pour le CSS en revanche c’est une autre histoire : en CSS, certaines règles prennent le dessus sur d’autres, et peuvent vous donner des migraines lorsqu’un texte reste bleu alors que vous avez bien précisé qu’il est rouge.
Différenciez les différentes priorités
On distingue quatre catégories de règles CSS :
1) Le style inline, défini directement dans le HTML
Lorsque vous écrivez du CSS dans du HTML, c’est ce qu’on appelle du style inline.
<div style="background-color: red;"></div>
2) Les id
Les id sont uniques. Vous ne pouvez pas utiliser plusieurs fois un id dans votre HTML.
<div id="box"></div>#box {
background-color: red;
}3) Les classes, pseudoclasses et attributs
Les classes permettent d’appliquer un style à plusieurs éléments.
Une pseudoclasse est un mot clé ajouté à un sélecteur qui permet de spécifier un état, comme :hover , par exemple, qui indique que l’on passe la souris au-dessus du sélecteur. Les attributs permettent de sélectionner un sélecteur précis.
<div class="box"></div>.box {
background-color: red;
}4) Les éléments
Le nom de votre balise HTML.
<div></div>div {
background-color: red;
}Mais comment le navigateur est-il capable de déterminer quelle règle CSS appliquer ? 🤯
La réponse se trouve dans la spécificité.
Déterminez les priorités par spécificité
Jetons un œil à la documentation MDN. Selon elle, on peut définir la spécificité comme :
La manière dont le navigateur décide quelle règle s’applique si plusieurs règles ont des sélecteurs différents, mais peuvent quand même s’appliquer au même élément.
La spécificité permet donc d’attribuer un score à un sélecteur afin de déterminer la priorité d’un sélecteur par rapport à un autre.
Voyez ça comme les types dans Pokémon : eau, feu, glace, psy… l’issue d’un match est certes déterminée par le niveau du pokémon, mais nous savons tous dans le fond que Carapuce l’emportera sur Salamèche, car l’eau triomphe du feu. Eh bien c’est pareil en CSS : le navigateur établit des règles de priorité à respecter. Votre navigateur procède par élimination, en vérifiant en premier si votre HTML contient du CSS via l’attribut style, puis en passant aux id et aux classes, avant de finir par vos éléments :
inline > id > pseudoclasses > pseudoéléments.
Pour comprendre la différence, je vous ai préparé un exemple.
Vous êtes un nouveau dresseur pokémon, et le professeur Chen vous donne votre première pokéball.
<div>
<!-- Une pokéball ! -->
</div>Notre HTML ne contient rien d’autre qu’une superbe pokéball !
div {
background-image: url(<https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Pokebola-pokeball-png-0.png/800px-Pokebola-pokeball-png-0.png>;);
background-size: cover;
width: 500px;
height: 500px;
margin: auto;
}Si j’ajoute mon CSS dans mon HTML comme suit :
<div style="width: 10px;">
<!-- Une pokéball ! -->
</div>D’après vous, en reprenant les règles de priorité établies, que se passe-t-il ?
*
*
Suspense…
*
*
La largeur de notre div ne fait plus que 10px, contrairement aux 500px établis dans notre CSS ! 😨
Mais pourquoi ? On a bien tout détaillé dans notre CSS, pourtant ?
Le navigateur suit les règles de priorité : le code inline est supérieur aux autres, et il sera donc appliqué en priorité.
Prenons un autre exemple :
<div class="salameche" id="carapuce">
<!-- UN POKÉMON -->
</div>Nous allons ajouter une classe salameche ainsi qu’un id carapuce .
div {
background-image: url(<https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Pokebola-pokeball-png-0.png/800px-Pokebola-pokeball-png-0.png>;);
background-size: cover;
width: 500px;
height: 500px;
margin: auto;
}Passons au CSS :
#carapuce {
background-image: url(<https://www.pokepedia.fr/images/c/cc/Carapuce-RFVF.png>;);
background-size: cover;
}
.salameche {
background-image: url(<https://www.pokepedia.fr/images/thumb/8/89/Salam%C3%A8che-RFVF.png/800px-Salam%C3%A8che-RFVF.png>;);
background-size: cover;
}En suivant notre logique, à votre avis, quel pokémon apparaîtra ?
Si vous avez répondu Carapuce, c’est la bonne réponse. Mais pourquoi ?
Code inline ? ❌
Id ? ✅
Class ? ✅
Élément ? ✅
Votre navigateur suit l’ordre des priorités. L’ id est plus fort que la classe.
Oui bon, en soi si on a un souci, il suffit de mettre un id et tout est fini !
En règle générale, évitez d’utiliser des id dans vos sélecteurs. Votre but est d’écrire du code réutilisable, or les id sont utilisés dans le cas de valeurs uniques : tous les sélecteurs qui les utilisent ne peuvent, par définition, être utilisés qu’une fois.
Comme les id ont une spécificité plus importante, il est difficile de les outrepasser. Le souci, c’est que vous voulez écrire du code lisible et maintenable, alors comment faire ? Eh bien, en vous focalisant principalement sur les sélecteurs de classe ! De cette manière, vous ferez en sorte qu’ils aient une spécificité plus basse, ce qui les rendra plus faciles à contourner.
Et si je veux vraiment utiliser une classe précise malgré un id ?
Dans ce cas, prenons un nouvel exemple :
<div id="carapuce" class="biker">
<!-- Une pokéball ! -->
</div>Dans ce cas précis, au lieu d’une deuxième classe, vous pourriez aussi y ajouter l’id :
#carapuce {
background-image: url(<https://www.pokepedia.fr/images/c/cc/Carapuce-RFVF.png>;);
background-size: cover;
}
#carapuce.biker {
background-image: url(<https://risibank.fr/cache/medias/0/10/1026/102649/full.png>;);
background-size: cover;
}Comment procède le navigateur dans ce cas-là ? Il cumule les points. L’id est toujours vainqueur, seulement ici vous avez déclaré un id ET une classe pour le MÊME élément. Dans ce cas-là, c’est #carapuce.biker qui l’emporte :
Super ! Mais j’imagine que comme dans toutes les règles, il y a des exceptions ?
Je vais être honnête avec vous, aujourd’hui encore il m’arrive de perdre des cheveux à cause de la spécificité. Rassurez-vous, avec l’expérience, vous allez créer des réflexes et définir des sélecteurs en fonction soit de vos besoins, soit des normes préétablies par vos équipes / collègues.
Suivez la nomenclature
Vous avez vu ce que sont le principe DRY et la spécificité. Mais existe-t-il des règles à suivre ? 🤔
Il n’existe pas de règles absolues pour créer l’architecture de votre CSS, seulement des recommandations. Que ce soit sur Medium, Stack Overflow, Reddit, Google… une rapide recherche vous livrera de nombreux articles sur le sujet. Certains expliquent que chaque développeur fait comme il l’entend, d’autres vous diront que non, il faut suivre des règles communes, tandis que d’autres encore émettent quelques réserves sur certains principes.
Au milieu de cette jungle de “c’est moi qui ai raison !!!", j’ai tenu à vous présenter des solutions pratiques. Les méthodes présentées dans ce cours sont testées et largement adoptées par les développeurs. Ces bases vous seront d’un grand secours pour créer une codebase CSS maintenable, et ce, pour des projets de n’importe quelle taille.
Ne pas ajouter votre CSS directement dans votre HTML mais plutôt dans un fichier CSS : chacun sa mission, chacun son fichier !
En règle générale, évitez d’utiliser des id dans vos sélecteurs. Votre but est d’écrire du code réutilisable, les id sont utilisés dans le cas de valeurs uniques. Peu importe que votre sélecteur ait 10, 20 ou 20 000 classes. Un id sera toujours plus fort.
La notion la plus importante lorsqu’on veut bâtir un code front-end robuste et maintenable est de s’asseoir, d’établir un plan et de s’y tenir coûte que coûte.
Anticiper aujourd’hui, c’est gagner du temps pour la suite.
À vous de jouer !
Dans cet exercice, nous allons reprendre la barre de navigation du site de Robbie Lens et jouer avec les id et les classes. Rendez-vous sur ce CodePen !
Vérifiez vos réponses grâce à la correction sur ce CodePen.
En résumé
La spécificité permet de mesurer le poids d’un sélecteur au sein du HTML, parmi les autres.
Il existe quatre niveaux de spécificité :
les feuilles de style locales (inline styles) ;
les id ;
les classes, pseudoclasses et attributs ;
les éléments.
Votre navigateur applique les éléments les plus spécifiques de façon prioritaire.
En créant et en appliquant votre propre structure, vous pouvez mettre de l’ordre dans votre CSS.
Dans le chapitre suivant, vous mettrez en pratique vos nouvelles connaissances en créant des sélecteurs modulables et structurés pour la mise en forme de votre site.
