Il est temps de fusionner tout ce que nous avons appris jusqu’ici 💪
Intégrez les notions apprises
Commençons par mettre en application ce que vous avez appris de la méthodologie BEM et du nesting de Sass. Si vous combinez des sélecteurs BEM et le nesting de Sass pour créer un block
et un block__element
, vous obtiendrez quelque chose comme ceci :
.block{
background-color: #15DEA5;
.block__element {
color: #fff;
}
}
Ce qui donne en CSS :
.block {
background-color: #15DEA5;
}
.block .block__element {
color: #fff;
}
On se retrouve avec un sélecteur block
ayant une spécificité de 0/0/1/0 et un sélecteur block__element
avec une spécificité de 0/0/2/0. Ce n’est pas idéal, mais tout fonctionnera comme vous le voulez, sans règles contradictoires.
Mais admettons que vous ayez à présent besoin de créer une variation de votre block__element
pour changer sa couleur de fond. Ceci implique de créer un sélecteurblock__element--modifier
, mais puisque vous avez augmenté la spécificité de votre élément, vous devez aussi vous assurer que vous augmentez celle de vos modificateurs d’au moins autant, sinon ils n’auront pas d’effet.
|
|
Les petites incohérences de spécificité entre sélecteurs créent des bugs et des comportements imprévisibles. Des modificateurs et des éléments ayant des degrés de spécificité variables peuvent se retrouver dépareillés, et les règles que vous vouliez outrepasser à certains endroits ne le seront pas, ou alors elles seront outrepassées 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. Vous vous rappelez du nesting avec des esperluettes ? Quand vous imbriquez avec une esperluette, cela relie le parent et l’enfant dans le CSS compilé. Mais l’enfant n’a pas besoin d’être un sélecteur, il peut aussi s’agir de simple texte !
Dans notre nest pour block__element
, remplaçons la partie “bloc” par une esperluette :
.block{
background-color: #15DEA5;
&__element {
color: #fff;
}
}
Il en résulte un sélecteur d’élément BEM identique dans son comportement aux sélecteurs d’éléments que nous avons écrits manuellement dans le troisième chapitre, mais avec le bénéfice supplémentaire de n’avoir à écrire “bloc” qu’une fois et de pouvoir profiter des formidables fonctionnalités de structure et de regroupement offertes par Sass.
.block {
background-color: #15DEA5;
}
.block__element {
color: #fff;
}
Maintenant, nous avons un sélecteur d’élément avec une spécificité basse de 0/0/1/0, comme nous le voulions.
Retournons à notre block__element--modifier
et recréons-le en utilisant les mêmes principes que pour créer le block__element
:
.block{
background-color: #15DEA5;
&__element {
color: #fff;
&--modifier {
background-color: #001534;
}
}
}
Nous obtenons un CSS compilé parfaitement conforme avec ce que nous voulions :
.block {
background-color: #15DEA5;
}
.block__element {
color: #fff;
}
.block__element--modifier {
background-color: #001534;
}
Essayez par vous-même !
Dans cet exercice, utilisez le refactoring sur un ancien exercice tout en faisant attention à la spécificité.
Houston... ?
Vous n'êtes pas connecté
Connectez-vous pour accéder aux exercices de codes et testez vos nouvelles compétences.
Vous avez créé des sélecteurs BEM en utilisant la structure épurée de Sass, ce qui vous permettra de vous assurer que votre code demeure bien organisé et facile à modifier. De plus, vous vous êtes épargné le travail de devoir taper le nom du bloc encore et encore et encore…
Vous avez échappé à bien des tendinites au poignet ! 🙌 Et tous vos sélecteurs ont la spécificité la plus basse qui soit : 0/0/1/0 !
Je sais, je sais… Je vous vois d’ici lever les yeux au ciel. 🙄 Spécificité plate, spécificité basse… Je suis obsédée.🤓 C’est possible.
Mais il y a une raison à cela. Comme pour tout dans la vie, il y a un temps et un lieu pour chaque chose.
Utilisez les spécificités là où vous en avez besoin
Juste parce que nous avons évité jusqu’à présent d’augmenter la spécificité ne veut pas nécessairement dire que nous ne le ferons jamais. La spécificité n’est pas mauvaise en soi, mais il y a un temps et un lieu pour s’en servir. En maintenant la spécificité au minimum, il devient beaucoup plus simple de créer un modificateur capable d’outrepasser les propriétés souhaitées.
Disons que nous avons créé un bouton avec un fond uni et un bouton modifié avec un fond transparent et un contour, ainsi :
.btn {
display: inline-block;
margin: 0 auto;
background: #15DEA5;
padding: 1rem;
&--outline {
background: transparent;
border: 2px solid #15DEA5;
}
}
Pour représenter un bouton désactivé, il faut le griser, ce qui implique de créer un autre modificateur. Dans le cas d’un bouton standard, cela veut dire mettre un fond gris, et dans le cas du bouton avec contour, rendre ce contour gris. Vous pourriez donc créer deux nouveaux modificateurs, un pour chaque bouton, mais cela voudrait dire encore des noms de sélecteurs à retenir, sans compter que ça ajouterait du désordre dans votre code.
Devinez ce qui simplifierait beaucoup tout ça… Mais oui, augmenter la spécificité !
Nous allons donc écrire deux nouveaux modificateurs, un pour chaque instance du bouton, mais nous utiliserons le même nom pour les deux. Pour les différencier, nous allons compter sur le nesting dans Sass, afin de créer des sélecteurs spécifiques pour chaque type de bouton.
.btn {
display: inline-block;
margin: 0 auto;
background: #15DEA5;
padding: 1rem;
&--disabled {
background: grey;
}
&--outline {
background: transparent;
border: 2px solid #15DEA5;
&.btn--disabled{
border: 2px solid grey;
}
}
}
Nous utilisons l’esperluette pour créer deux sélecteurs distincts. Le premier est un modificateur standard, btn--disabled
, qui outrepassera la couleur de fond de .btn
pour la mettre en gris. Le second est un sélecteur avec deux classes, .btn--outline
et .btn--disabled
, ce qui signifie que les deux classes doivent être appliquées afin que les règles que comporte ce sélecteur entrent en vigueur pour changer la couleur du contour en gris.
.btn {
display: inline-block;
margin: 0 auto;
background: #15DEA5;
padding: 1rem;
}
.btn--disabled {
background: grey;
}
.btn--outline {
background: transparent;
border: 2px solid #15DEA5;
}
.btn--outline.btn--disabled {
border: 2px solid grey;
}
Vous vous retrouvez avec quatre sélecteurs différents :
Le bouton :
.btn
Le modificateur pour le contour du bouton :
.btn--outline
Le modificateur qui rend le bouton gris :
.btn-disabled
Le modificateur qui rend le contour du bouton gris :
.btn--outline.btn--disabled
Techniquement, le quatrième de ces sélecteurs a une spécificité de deux, mais .btn--disabled
marche aussi sans .btn--outline
, ce qui en fait un système modulaire et réutilisable, pour lequel vous pouvez ajouter ou retirer la classe : l’élément se comportera toujours comme souhaité.
Essayez par vous-même !
Dans cet exercice, créez plusieurs sélecteurs et augmentez la spécificité.
Houston... ?
Vous n'êtes pas connecté
Connectez-vous pour accéder aux exercices de codes et testez vos nouvelles compétences.
Ajoutez des sélecteurs spécifiques à votre HTML
Mettons ces sélecteurs en application en les intégrant dans du HTML. Premièrement, créons deux boutons, un avec contour et un sans :
class="container"
class="btn"Solid Button
class="btn btn--outline"Outline Button

À présent, désactivons-les tous les deux en appliquant nos deux sélecteurs restants :
class="container"
class="btn btn--disabled"Solid Button
class="btn btn--outline btn--disabled"Outline Button

Disons que vous voulez que votre premier bouton ait un fond transparent et un contour, comme le second. Tout ce que vous avez à faire, c’est appliquer le modificateur concerné :
class="container"
class="btn btn--disabled btn--outline"Solid Button
class="btn btn--outline btn--disabled"Outline Button

Grâce à la spécificité accrue de la combinaison détouré/désactivé, ajouter la même classe dans deux situations différentes produit deux résultats différents mais prévisibles. Pas besoin de vous soucier de retenir tout un tas de sélecteurs très spécifiques, ni de vous inquiéter du fait que si vous supprimez un modificateur, un autre risque d’avoir un comportement imprévisible.
En utilisant la spécificité accrue seulement là où c’est nécessaire, vous pouvez créer un système de sélecteurs qui est non seulement propre et maintenable, mais aussi stable et prévisible.
En résumé
Pas de panique si votre cerveau frise la surchauffe. Ça veut dire que vous êtes en train d’apprendre. Et pas qu’un peu ! Nous avons branché votre cerveau sur la matrice et vous venez de télécharger l’équivalent de l’art du kung fu en matière de CSS.
Focalisez-vous plutôt sur les points clé :
les incohérences de spécificité entre différents sélecteurs créeront des bugs et des comportements imprévisibles ;
utilisez les esperluettes pour un nesting efficace dans Sass sans froisser les principes BEM ;
utilisez le nesting et la spécificité pour créer un système de sélecteurs maintenable dans Sass.
Et maintenant, revenons sur tout ce que vous avez appris avec le quiz de fin de section ! Une fois que vous avez fini de réviser, je vous retrouve dans la section suivante et nous apprendrons encore des tas de trucs Sass magiques.