Télécharger le PDF du cours
L’imbrication des sélecteurs CSS
La façon dont le CSS est construit et fonctionne aujourd’hui nous pousse à souvent déclarer de multiples fois certains sélecteurs afin de leur appliquer des styles.
Dans le cas de page modérément complexe, cela peut amener à de nombreuses duplications et à des feuilles de styles inutilement lourdes et complexes à lire.
Cela fait des années que les développeurs militent pour une imbrication des sélecteurs CSS pour résoudre ce genre de problème. Le groupe de travail gérant l’évolution du CSS se penche sur ce problème depuis longtemps et un premier brouillon de travail a vu le jour en 2019 avec deux méthodes qui devraient nous permettre d’imbriquer nos sélecteurs dans le futur :
- L’imbrication directe avec l’utilisation du sélecteur d’imbrication
&; - L’utilisation de la règle
@nest.
Ces deux outils sont toujours en phase de développement et ne sont pas encore reconnus comme standards mais il y a peu de chance qu’ils soient abandonnés à ce stade. Il me semble donc très intéressant de vous les présenter.
Le sélecteur d’imbrication &
Lorsqu’on déclare une règle CSS imbriquée, nous avons besoin de faire référence au parent puisque c’est tout l’intérêt de l’imbrication. Le sélecteur d’imbrication & permet de faire référence à ce sélecteur parent.
Cette première méthode fonctionne à condition que le sélecteur d’imbrication soit le premier sélecteur simple contenu dans le premier sélecteur complexe du sélecteur parent. Grosso-modo, cela signifie qu’il faudra que nos sélecteurs imbriqués commencent par &. Par exemple, & .foo est autorisé mais .foo & ne l’est pas.
Voici la syntaxe qui sera utilisée en CSS avec ce sélecteur :
La règle CSS @nest
La règle CSS @nest produit exactement le même effet que l’utilisation du sélecteur & mais est moins restrictive dans son utilisation (les situations d’imbrication invalides sont moins nombreuses). En contrepartie, elle est un peu plus “lourde” dans son écriture.
La syntaxe devrait être la suivante :
Vous pourrez donc utiliser & ou @nest en fonction de la situation et de vos préférences personnelles.
L’héritage étendu
L’héritage étendu des styles est une autre fonctionnalité très attendue par les développeurs. L’idée ici serait qu’un sélecteur puisse hériter de l’ensemble des styles définis pour un autre sélecteur non apparenté.
Les pré-processeurs CSS comme Sass et Less proposent cette fonctionnalité depuis longtemps via des règles comme @extend. Pour le moment, cependant, il n’existe rien de tel en CSS.
La seule chose possible aujourd’hui en CSS est l’importation de l’ensemble des styles d’une feuille de style dans une autre via la règle @import.
