SASS et BEM

Cet article explique SASS et BEM.

Nous expliquerons les concepts et les méthodes de mise en œuvre permettant d’éviter la confusion et la fragilité qui surviennent souvent lorsque le CSS prend de l’ampleur, en utilisant SASS et BEM, à l’aide d’exemples concrets.

YouTube Video

SASS et BEM

À mesure que le nombre de fichiers et d’écrans augmente, le CSS rencontre souvent des problèmes tels que « Je ne sais pas où ce style est défini » ou « Un petit changement a cassé l’apparence sur un autre écran ».

Cela s’explique par le fait que le CSS est intrinsèquement un langage qui n’impose pas de règles de conception. Si vous continuez à écrire tel quel, les dépendances involontaires vont augmenter.

SASS et BEM sont des techniques pratiques pour transformer le CSS d’un code écrit au coup par coup à un code que vous concevez et gérez, évitant ainsi ces problèmes. En combinant les deux, vous pouvez clarifier la signification des styles et améliorer en même temps la lisibilité, la réutilisabilité et la maintenabilité.

Pourquoi le CSS devient-il facilement ingérable ?

Un CSS comme celui-ci peut devenir difficile à comprendre quant à son comportement réel lorsque vous revenez sur le code plus tard.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• Dans cet exemple, la même classe .title a une apparence différente selon l’endroit où elle est placée, de sorte qu’il est impossible de savoir immédiatement quel style sera appliqué à ce .title.
• De cette manière, à mesure que les sélecteurs deviennent plus profonds et dépendent davantage des éléments parents, il devient difficile de prédire la portée du CSS et le code devient fragile lors des modifications.

BEM est une convention de nommage qui « exprime les rôles à travers les noms ».

BEM signifie Bloc / Élément / Modificateur et indique dans le nom à quel composant la classe fait référence et dans quel état elle se trouve.

• Block est un composant indépendant.
• Element est un élément interne du Block.
• Modifier représente un état ou une variation.

1.card {}
2.card__title {}
3.card--highlighted {}

Avec cette convention de nommage, vous pouvez déduire la structure et le rôle rien qu’en regardant le HTML.

Forme de base du HTML utilisant BEM

Voici un exemple d’interface de carte exprimé en HTML avec BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Rien qu’avec les noms de classes, on comprend qu’il s’agit d’un « composant card », d’un « titre à l’intérieur » et d’un « état accentué ». C’est le principal avantage de BEM.

Cependant, BEM à lui seul peut produire un CSS verbeux.

Si vous écrivez BEM tel quel dans le CSS, la quantité de code a tendance à augmenter.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Ici, en utilisant SASS, vous pouvez avoir un code organisé qui maintient la structure.

Exprimez naturellement BEM avec l’imbrication SASS.

En utilisant l’imbrication SASS, vous pouvez refléter directement la structure BEM dans votre code.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& fait référence au sélecteur parent et fonctionne très bien avec la convention de nommage BEM.

CSS généré à partir de ce SASS

Le SASS ci-dessus est compilé en CSS de la manière suivante :.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Même si l’apparence est la même, la charge cognitive pour le développeur est considérablement réduite.

Concevoir pour une utilisation sûre des Modificateurs

Comme les Modificateurs dans BEM représentent des « états », il est essentiel de les limiter à des surcharges.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

La conception devient plus stable si les Modificateurs sont considérés non pas comme des « ajouts » mais comme des « modifications ».

Limitez l’imbrication des Éléments à un seul niveau.

En BEM, il est important de ne pas imbriquer les éléments trop profondément.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Des éléments multi-niveaux comme .card__header__title sont le signe qu’il faut envisager de diviser le Block.

Un exemple de structure de fichiers SASS

Pour finir, voici un exemple de structure SASS, adaptée aux projets réels.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

Si vous gérez chaque composant comme 1 bloc = 1 fichier, il y aura moins de risques que tout se « casse ».

Exemple de card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Comme tout est autonome à cette échelle, supprimer, déplacer, ou réutiliser devient facile.

Résumé

SASS et BEM ne sont pas seulement des techniques à la mode : ce sont des approches pratiques pour transformer le CSS en code conçu.

• BEM nomme la signification et le rôle.
• SASS permet une écriture simple tout en préservant la structure.
• La combinaison des deux rend le CSS moins sujet aux erreurs.

Écrivons dès aujourd’hui le CSS de façon à ce que votre futur vous puisse le comprendre.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video