wikinotes

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
{{tag>cours dev développement web css sass html}}



====== Définissez des priorités ======

Notes et transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sass-1#table-of-content|Simplifiez vous le CSS avec Sass]] proposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].

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.

<code html>
<div style="background-color: red;"></div>
</code>

<note warning>
On vous déconseille très fortement ce style ! Il est important de toujours séparer votre CSS dans un fichier .css. Cela vous évitera de nombreux problèmes et reste LA règle de base pour un code organisé.
</note>

==== 2 - Les id ====

Les ''id'' sont uniques. Vous ne pouvez pas utiliser plusieurs fois un ''id'' dans votre HTML.

<code html>
<div id="box"></div>
</code>

<code css>
#box {
     background-color: red;
}
</code>

==== 3 - Les classes, pseudo-classes et attributs ====

Les **classes** permettent d’appliquer un style à plusieurs éléments. 
Une **pseudo-classe** 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.

<code html>
<div class="box"></div>
.box {
     background-color: red;
}
</code>

==== 4 - Les éléments ====

Le nom de votre balise HTML.

<code html>
<div></div>
</code>

<code css>
div {
      background-color: red;
}
</code>

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 [[https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#sp%C3%A9cificit%C3%A9|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 :

la chaine de priorité :

  inline > id > pseudo-classes > 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.

<code html>
<div>
  <!--  Une pokéball ! -->
</div>
</code>

Notre HTML ne contient rien d’autre qu’une superbe pokéball !

<code css>
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;
}
</code>

Si j’ajoute mon CSS dans mon HTML comme suit :

<code html>
<div style="width: 10px;">
<!--   Une pokéball ! -->
</div>
</code>

D’après vous, en reprenant les règles de priorité établies, que se passe-t-il ?


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 :

<code html>
<div class="salameche" id="carapuce">
<!--   UN POKÉMON -->
</div>
</code>

Nous allons ajouter une classe ''salameche'' ainsi qu’un id ''carapuce''.

Le CCS initial
<code css>
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;
}

Modifions le CSS initial comme suivant :
<code 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;
}
</code>

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.

<note>
Il est toujours judicieux de revoir les bases pour consolider ses connaissances : n’hésitez pas à relire [[cours:informatique:dev:web:creez_votre_site_web_avec_html5_et_css3/210_integrer_le_css_dans_la_page_html|ce chapitre du cours sur l’intégration du CSS]] sur la différence entre classes et id, et dans quels cas les utiliser.
</note>

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é la présence d'un id ?

Dans ce cas, prenons un nouvel exemple :

<code html>
<div id="carapuce" class="biker">
<!--   Une pokéball ! -->
</div>
</code>

Dans ce cas précis, au lieu d’une deuxième classe, vous pourriez aussi y ajouter l’id :

<code css>
#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;
}
</code>

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 :

{{carapuce_biker.png|Une image du pokemon Carapuce avec des lunettes de soleil}}
Carapuce Biker!

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 structure 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.


===== 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, pseudo-classes 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.




[[110_simplifier_votre_code|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[130_clarifier_html_via_bem|Suivant ▷]]
wikinotes

Outils pour utilisateurs

Outils du site

Outils de la page
