• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 8/6/20

Utilisez des sélecteurs BEM avec Sass

Log in or subscribe for free to enjoy all this course has to offer!

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.

.block{
background-color: #15DEA5;
.block__element {
color: #fff;
}
.block__element--modifier {
background-color: #001534;
}
}
.block {
background-color: #15DEA5;
}
.block .block__element {
color: #fff;
}
.block .block__element--modifier {
background-color: #001534;
}

 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é.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

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 :

  1. Le bouton :  .btn

  2. Le modificateur pour le contour du bouton :  .btn--outline

  3. Le modificateur qui rend le bouton gris :  .btn-disabled

  4. 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é.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

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 :

<div class="container">
<div class="btn">Solid Button</div>
<div class="btn btn--outline">Outline Button</div>
</div>

Image d'un bouton avec contour et d'un bouton sans contour
Un bouton avec contour et un bouton sans contour

À présent, désactivons-les tous les deux en appliquant nos deux sélecteurs restants :

<div class="container">
<div class="btn btn--disabled">Solid Button</div>
<div class="btn btn--outline btn--disabled">Outline Button</div>
</div>

Image d'un bouton vide et d'un bouton rempli désactivés
Un bouton vide et un bouton rempli désactivés

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é :

<div class="container">
<div class="btn btn--disabled btn--outline">Solid Button</div>
<div class="btn btn--outline btn--disabled">Outline Button</div>
</div>
Images de boutons avec un fond transparent
Des boutons avec un fond transparent

 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.

Example of certificate of achievement
Example of certificate of achievement