Simplifiez-vous le CSS avec Sass

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

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.

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

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>

À 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>

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>

 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.

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.