Formation Apprendre le CSS : Les calques

Dans ce chapitre, on va revenir sur une notion importante en CSS : la spécificité. On va aussi découvrir un nouvel outil très utile pour mieux organiser nos styles : les calques .

La spécificité

Quand plusieurs règles ciblent le même élément, CSS doit choisir laquelle appliquer. Si les sélecteurs ont le même poids, c'est la dernière règle écrite qui l'emporte.

Calcul du poid

On peut retenir une règle simple :

• un sélecteur de type élément rapporte peu
• une classe rapporte davantage
• un id est encore beaucoup plus fort

Cela explique pourquoi il est souvent difficile d'écraser des styles écrits avec des sélecteurs trop précis. Vous pouvez utiliser specificity calculator pour calculer le poids de vos règles.

Le cas de !important

Quand on ne parvient plus à écraser une règle, on peut être tenté d'utiliser :

.btn {
  background: green !important;
}

Avec !important, la règle devient prioritaire sur les autres règles quelque soit leur spécificité. Cependant, dans les fait, l'utilisation de !important est souvent le signe d'une mauvaise organisation en CSS et ne devra être utilisé que de manière exceptionnel.

Le principe de @layer

Les calques permettent de regrouper les règles dans des calques afin de mieux contrôler leur priorité.

@layer base {
  button {
    background: transparent;
  }
}

Ici, on place une règle dans un calque nommé base.

On peut faire la même chose avec un autre calque :

@layer theme {
  button {
    background: green;
  }
}

Le calque theme est écrit après le calque base, ses règles l'emporteront systématiquement sur celle du calque base peu importe la spécificité des sélecteurs à l'intérieur.

Attention cependant, une règle qui n'est dans aucun calque garde une priorité supérieure aux règles placées dans des calques.

Autrement dit, si vous commencez à utiliser @layer, il faut essayer d'être cohérent et de placer toutes les règles dans des calques pour éviter des surprises.

Définir l'ordre des layers

On peut définir explicitement l'ordre des calques au début de notre fichier CSS principal :

@layer reset, base, components, utilities, theme;

Ici, on indique l'ordre général, le calque placé en dernier a la plus grande prioriété. Cette approche est très pratique, car elle permet de contrôler la hiérarchie indépendamment de l'endroit où les règles sont définies plus tard.

Exemple d'organisation

On peut ensuite écrire :

@layer reset {
  * {
    margin: 0;
    padding: 0;
  }
}

@layer base {
  body {
    font-family: sans-serif;
  }
}

@layer theme {
  .btn {
    background: green;
    color: white;
  }
}

Dans ce cas :

• le reset reste très bas dans la hiérarchie
• la base définit les styles généraux
• le thème vient personnaliser l'apparence plus haut dans la cascade

@import et layer()

On peut aussi affecter un fichier importé à un layer précis :

@import "reset.css" layer(reset);

Cela permet de dire que tout le contenu importé appartient au layer reset.

Une organisation classique des calques

Il n'y a pas une seule bonne manière d'organiser ses calques, mais une structure fréquente ressemble à ceci :

@layer reset, base, components, utilities, theme;

Par exemple :

• reset pour remettre les styles du navigateur à plat
• base pour les styles globaux du document
• components pour les composants réutilisables (boutons, cartes...)
• modules pour les éléments de page (header, footer, grille article...)
• utilities pour les classes utilitaires comme .hidden
• theme pour les couleurs ou variantes visuelles

L'important n'est pas tant le nom exact que la cohérence de l'ordre choisi.

Les calques simplifient beaucoup la gestion des priorités, mais ils ne suppriment pas complètement la logique CSS habituelle. À l'intérieur d'un même layer la spécificité continue d'exister et l'ordre des règles continue d'avoir de l'importance

Autrement dit, les calques ajoutent un niveau d'organisation supplémentaire, mais ne remplacent pas la cascade.