1. Ordre de priorité du rendu

L'ordre de priorité des styles CSS pour un élément donné est le suivant, du plus prioritaire au moins prioritaire :

!important > Styles inline (spécificité 1000) > Sélecteur ID (spécificité 100) > Sélecteur de classe (spécificité 10) > Balise (spécificité 1) > Sélecteur universel > Héritage > Propriétés par défaut du navigateur

2. Héritage

Les styles hérités ont la priorité la plus faible. Si un élément possède sa propre définition de style pour un attribut donné, celle-ci remplacera la valeur héritée. En cas de multiples styles hérités, celui provenant du parenet le plus proche de l'élément actuel aura une priorité relative plus élevée.

3. Accumulation (Cascade)

L'accumulation fait référence à la manière dont les conflits sont résolus lorsque plusieurs styles CSS ciblent le même élément avec le même attribut. Le navigateur applique la règle du sélecteur ayant la spécificité la plus élevée, ce qui signifie que les styles avec une spécificité plus grande écrasent ceux avec une spécificité plus faible.

En bref, plus la spécificité est élevée, plus le pouvoir est grand.

Ordre d'exécution des sélecteurs CSS

Le moteur de rendu analyse les sélecteurs CSS de droite à gauche. Cette approche vise à minimiser les correspondances invalides, améliorant ainsi la rapidité et les performances. (Pour comprendre pourquoi le navigateur analyse les CSS de droite à gauche, une recherche est recommandée !)

Lors de la rédaction de sélecteurs CSS, il est préférable que le terme du sélecteur le plus à droite (le plus spécifique) corresponde au moins de nœuds possible.

L'algorithme central du moteur CSS pour la correspondance des nœuds fonctionne de droite à gauche.<br></br><br></br>À éviter : div ul .item { ... }<br></br>Recommandé : .item { ... }

Computed Styles efficaces

Les navigateurs disposent d'une stratégie remarquable : dans certaines situations, ils partagent les "Computed Styles". De nombreux éléments sur une page peuvent partager ces styles, ce qui améliore considérablement l'efficacité de l'exécution.

Si le style calculé peut être partagé, il n'est pas nécessaire d'exécuter l'algorithme de correspondance, ce qui garantit une efficacité d'exécution très élevée. Si deux éléments ou plus peuvent être confirmés comme ayant des styles calculés identiques sans calcul supplémentaire, le style calculé n'est effectué qu'une seule fois, et les autres éléments partagent simplement ce style calculé.

<section class="one">
   <p class="desc">Un</p>
</section>

<section class="one">
   <p class="desc">Deux</p>
</section>

Comment partager efficacement ?

1. Le nom de la balise et les attributs de classe doivent être identiques.
2. Il ne doit pas y avoir d'attribut style. Même si les attributs style sont identiques, ils ne seront pas partagés.
3. Les sélecteurs de frères comme :first-child, :last-child, + selector ne peuvent pas être utilisés.
4. Les attributs mappés doivent être identiques.

Non partageable, car un style inline est utilisé :
<p style="color:red;">Le blog de Jartto</p>
<p style="color:red;">Blog</p>

Partageable si les éléments et les attributs sont identiques :
<p align="middle">Le blog de Jartto</p>
<p align="middle">Blog</p>

Ordre d'écriture des styles CSS

Il est important de noter que le navigateur ne commence pas immédiatement à analyser les styles CSS dès qu'il les reçoit. Au lieu de cela, il distribue et rend les styles selon la structure de l'arbre DOM en fonction de leur ordre d'écriture. Il parcourt ensuite les styles CSS de chaque nœud de l'arbre. L'ordre de parcours des styles CSS à ce stade correspond entièrement à l'ordre d'écriture initial.

Pendant l'analyse, si le navigateur détecte qu'un changement de position d'un élément affecte la mise en page, il doit revenir en arrière pour un nouveau rendu.

Par exemple :

width: 50px;
height: 50px;
font-size: 14px;
position: absolute;

Lorsque le navigateur analyse position, il réalise soudain que cet élément est positionné de manière absolue et doit être retiré du flux normal du document, alors qu'il avait été analysé comme un élément ordinaire auparavant. Il est donc obligé de réanalyser.

Amélioration :

position: absolute;
width: 50px;
height: 50px;
font-size: 14px;

Cela permet au moteur de rendu de travailler plus efficacement.

Ordre d'écriture CSS recommandé

1. Propriétés de positionnement :
position, display, float, left, top, right, bottom, overflow, clear, z-index
2. Propriétés intrinsèques :
width, height, padding, border, margin, background
3. Styles de texte :
font-family, font-size, font-style, font-weight, font-variant, color
4. Propriétés de texte :
text-align, vertical-align, text-wrap, text-transform, text-indent, text-decoration, letter-spacing, word-spacing, white-space, text-overflow
5. Propriétés CSS3 ajoutées :
content, box-shadow, border-radius, transform

Stratégies d'optimisation

1. L'utilisation de sélecteurs d'ID est très efficace : ``` /* Mauvais */ p#id1 { color: red; }

   /* Bon */ #id1 { color: red; }

2. Éviter les nœuds imbriqués en profondeur : ``` /* Mauvais / div > div > div > p { color: red; } / Bon */ .p-class { color: red; }

3. Ne pas utiliser de sélecteurs d'attributs : Par exemple : p[att1="val1"]. La correspondance est très lente. Encore moins si vous écrivez : p[id="id1"], ce qui réduit un sélecteur d'ID à un sélecteur d'attribut.

   /* Mauvais */
   p[id="jartto"] { color: red; }
   p[class="blog"] { color: red; }
   /* Bon */
   #jartto { color: red; }
   .blog { color: red; }
   

4. Placer les préfixes du navigateur en premier, et les propriétés standard à la fin : ``` .foo { -moz-border-radius: 5px; border-radius: 5px; }

5. Respecter les règles de CSSLint : ``` font-faces Ne pas utiliser plus de 5 polices web import Interdire l'utilisation de @import regex-selectors Interdire les sélecteurs d'expressions régulières dans les sélecteurs d'attributs universal-selector Interdire l'utilisation du sélecteur universel (*) unqualified-attributes Interdire l'utilisation de sélecteurs d'attributs non qualifiés zero-units Ne pas ajouter d'unités après 0 overqualified-elements Lors de l'utilisation de sélecteurs adjacents, ne pas utiliser de sélecteurs inutiles shorthand Utiliser les propriétés abrégées duplicate-background-images L'URL identique ne doit pas apparaître plus d'une fois dans la feuille de style

6. Réduire la taille des documents CSS : ``` Supprimer les règles CSS vides. Les valeurs de 0 ne nécessitent pas d'unité. Utiliser les notations abrégées. Pour les valeurs décimales flottantes 0.xx, le 0 avant le point décimal peut être omis. Ne pas définir trop de styles pour les éléments h1 à h6.

7. will-change CSS : La propriété will-change permet à l'auteur d'informer à l'avance le navigateur des changements de style par défaut, en utilisant une propriété dédiée pour notifier au navigateur de surveiller les changements à venir, afin d'optimiser et d'allouer la mémoire.

8. Ne pas utiliser @import : L'utilisation de @import pour inclure des fichiers CSS affecte le téléchargement parallèle du navigateur. Les fichiers CSS référencés via @import ne sont connus du navigateur qu'après le téléchargement et l'analyse du fichier CSS qui les référence. C'est à ce moment-là qu'ils sont téléchargés, puis analysés, que l'arbre de rendu est construit, etc. La présence de multiples @import peut entraîner un désordre dans l'ordre de téléchargement. Dans Internet Explorer, @import peut perturber l'ordre de téléchargement des fichiers de ressources, faisant que les fichiers JS situés après @import soient téléchargés avant celui-ci, et même perturber ou corrompre le téléchargement parallèle de @import lui-même.

9. Éviter les retraits/réaménagements excessifs (Reflow) : L'utilisation de ces propriétés oblige le navigateur à recalculer la position et la taille de la mise en page. Les éléments provoquant un réaménagement courant sont :

   width, height, padding, margin, display, border-width, border, top, position, font-size, float, text-align, overflow-y, font-weight, overflow, left, font-family, line-height, vertical-align, right, clear, white-space, bottom, min-height
   

10. Réduire les propriétés coûteuses : Lorsqu'une page subit un nouveau rendu, ces propriétés peuvent réduire les performances de rendu du navigateur. Par conséquent, lors de la rédaction de CSS, nous devrions essayer de minimiser l'utilisation de propriétés coûteuses telles que :

    box-shadow
    border-radius
    filter
    :nth-child
    

11. S'appuyer sur l'héritage : Si certains attributs peuvent être hérités, il est inutile de les redéfinir.

12. Utiliser efficacement les computedStyle.