La syntaxe est importante et nous permet d’écrire du code plus organisé, certes ; mais seule, elle n’est pas très efficace et on ne comprend pas trop l’intérêt d’écrire du CSS dans un fichier scss , n’est-ce pas ? C’est ici qu’intervient le nesting !
Hiérarchisez grâce au nesting
De la même façon que vous imbriquez des balises en HTML, dans Sass vous pouvez imbriquer les sélecteurs, ou autrement dit, les nester :
.nav {
text-align: right;
.nav__link {
font-size: 15px;
padding-left: 30px;
.nav__link--purple {
color: #a5b4fc;
}
}
}Vous obtenez une hiérarchie de sélecteurs claire qui reflète leur structure HTML : vos sélecteurs sont imbriqués exactement comme ils le seraient en HTML. Regardez le CSS qui en résulte :
.nav {
text-align: right;
}
.nav .nav__link {
font-size: 15px;
padding-left: 30px;
}
.nav .nav__link .nav__link--purple {
color: #a5b4fc;
}On obtient bien un code plus lisible et compréhensible !
Incorporez les sélecteurs au nesting
Il n’y a pas réellement de limite quant à la profondeur du nesting qu’on peut opérer dans Sass. Au début de mon apprentissage, j’ai plusieurs fois tenté de répliquer intégralement mon HTML dans Sass en pensant gagner du temps :
.parent-div {
background-color: #15DEA5;
.enfant-div {
color: #fff;
.petit-fils-div {
color: #D6FFF5;
}
.petite-fille-div {
color: #D6FFF5;
}
}
}Le souci, c’est qu’en les nestant trop, je me suis retrouvée avec des sélecteurs très spécifiques, c'est-à-dire que le navigateur appliquait certaines règles de style en priorité par rapport à d’autres, ce qui a rendu mon code difficile à débugger.
.parent-div {
background-color: #15DEA5;
}
.parent-div .enfant-div {
color: #fff;
}
.parent-div .enfant-div .petite-fille-div {
color: #D6FFF5;
}Par exemple, si vous avez ce code et que vous voulez modifier l’image :
<section class="project-preview">
<div class="proj-preview__image">
<img src="/public/img/photography_1280w.jpg" alt="Titre de mon projet" >
</div>
<h1 class="project-preview__title">
Titre de mon projet
</h1>
<p class="project-preview__content">
Informations de mon projet
</p>
</section>Vous pourriez juste vous arrêter au sélecteur précédent et avoir seulement :
.project-preview{
// votre code ici
img {
color: #fff;
}
}En pratique, si vous vous retrouvez à imbriquer au-delà de deux niveaux de profondeur, arrêtez-vous et réfléchissez à la façon dont vous êtes en train de structurer votre bloc. Il y a des chances que vous soyez en train de créer des sélecteurs trop spécifiques.
La conséquence ? Un casse-tête à débugger, et vous devrez refactoriser votre code.
Nous avons effectué la forme la plus simple de nesting dans Sass : placer un sélecteur dans un autre sélecteur. Sass compilera toujours ceci sous forme de sélecteurs séparés par des espaces, ce qui, en CSS, correspond à un combinateur descendant.
Rajoutez des combinateurs
Pause pause pause ! Combinateurs descen... quoi ? 😅
Un combinateur descendant, aussi appelé sélecteur d’éléments descendant, permet de sélectionner les éléments qui dépendent d’un sélecteur.
Il est matérialisé par un ou plusieurs espaces. Vous en avez déjà croisé sans le savoir : par exemple, ul li permet de cibler n’importe quel élément <li> dans un élément <ul>.
Les combinateurs descendants vont augmenter la spécificité du sélecteur, ou son score, mais ils peuvent aussi contribuer à créer du code plus propre et plus lisible. En CSS, les combinateurs, peu importe leur type, sélectionnent les éléments en fonction de leur relation à un élément défini et précis.
On est perdus capitaine ! 🫠
Reprenons ensemble pas à pas avec un exemple proche de quelque chose que vous connaissez bien maintenant : la barre de navigation de la partie 1.
Nous avons une division <div>, qui contient des liens <a>.
<div class=”links”>
<a>Accueil</a>
<a>À propos</a>
<a>Portfolio</a>
</div>Plutôt que de créer un sélecteur de classe pour <a> et de l’appliquer à chacun des items, vous pouvez appliquer un combinateur enfant qui sélectionne tous les enfants directs du parent, ici <div>.
.links {
margin-left: 30px;
}
.links > a {
color: #242424;
text-decoration: none;
}Vous voyez le signe > , il indique que tous les sélecteurs enfants de .links , ici nos liens a , hériteront de ces propriétés !
On vient de voir ensemble le combinateur descendant, mais il en existe plein d’autres. Et je suis certaine que vous en connaissez certains sans vraiment le savoir. 😉
Combinateur parent
.parent {
background-color: white;
}Tout ce qui est relié à l’élément parent adoptera la couleur de fond spécifiée.
Combinateur descendant
.parent .descendant {
color: white;
}Si le deuxième élément est le descendant du premier, alors il adoptera la couleur spécifiée.
Combinateur parent > enfant
.parent > .enfant {
color: white;
}Dans ce cas, si le deuxième élément est un enfant du premier, alors il adoptera la couleur spécifiée.
Combinateur adjacent
.parent + .adjacent {
color: white;
}Si le deuxième élément est immédiatement précédé du premier, alors il adoptera la couleur spécifiée.
Une minute, descendant on l’a vu plus tôt, mais c’est quoi la différence entre “descendant” et “enfant” ? 🤔
C’est la même différence qu’en français :
vous êtes à la fois l’enfant et le descendant de vos parents ;
vous n’êtes pas l’enfant de vos grands-parents, en revanche vous êtes leur descendant.
Un élément enfant a donc un lien direct et immédiat avec son élément parent alors qu’un lien descendant, non. Vous avez un lien direct et immédiat avec vos parents. Par contre, vous êtes le descendant de vos grands-parents, comme vos cousins : votre lien n’est pas direct et immédiat.
Combinez BEM et Sass
Commençons par mettre en application ce que vous avez appris de la méthodologie BEM et du nesting de Sass ! Et avec un exemple familier, oui je parle de notre barre de navigation. Si vous combinez des sélecteurs BEM et le nesting de Sass, vous obtiendrez quelque chose comme ceci :
.navbar {
display: flex;
.navbar__link {
color: #242424;
text-decoration: none;
}
}Ce qui donne en CSS :
.nav {
display: flex;
}
.navbar .navbar__link {
color: #242424;
text-decoration: none;
}Maintenant, admettons que vous ayez à présent besoin de créer une variation de votre .nav__link pour changer sa couleur. Il faudrait créer un nouveau modificateur. Seulement, sans le savoir, vous avez augmenté la spécificité de votre élément. Vous devez aussi augmenter celle de vos modificateurs, sinon ils n’auront pas d’effet :
.navbar .navbar__link .navbar__link--purple {
color: #a5b4fc;
}Toutes ces petites incohérences de spécificité entre sélecteurs créent des bugs et des comportements difficiles à anticiper. Les règles que vous vouliez surcoucher à certains endroits ne le seront pas, ou alors elles le seront, mais là où vous ne le vouliez pas.
Ce qu’il vous faut, c’est un moyen de nester dans Sass sans aller à l’encontre des principes BEM. Sass a un signe spécifique pour concaténer les sélecteurs parent et enfant : l’esperluette (&) !
Dans notre cas, comment peut-on l’appliquer ? On remplace la partie bloc de notre élément navbar__link , ici .navbar , par une esperluette :
.navbar {
display: flex;
&__link {
color: #242424;
text-decoration: none;
}
}Sass va remplacer l’esperluette &, par le sélecteur parent :
.navbar {
display: flex;
}
.navbar__link {
color: #242424;
text-decoration: none;
}On obtient un sélecteur d’élément BEM identique, tout en précisant seulement le “bloc” et en conservant les bénéfices de Sass : un code lisible et organisé.
À vous de jouer !
Utilisez vos connaissances sur le nesting et l’esperluette sur la section .intro de votre code, dans ce CodePen.
Vérifiez vos réponses dans ce CodePen.
En résumé
Dans Sass, les sélecteurs peuvent être imbriqués, ou nestés, dans d’autres sélecteurs.
Le nesting permet d’imbriquer les sélecteurs comme en HTML.
Sass peut créer tous les combinateurs CSS.
Utilisez l’esperluette pour lier un sélecteur imbriqué à un sélecteur parent sans recourir à un combinateur.
Attention à ne pas créer de sélecteurs trop spécifiques en abusant du nesting !
Le nesting est une des fonctionnalités phares de Sass, mais ce n’est pas la seule. Dans notre quête pour optimiser votre code et éviter les répétitions, il est temps pour vous d’aborder les variables dans le prochain chapitre.
