Comment décider si vous devez chaîner ou étendre des classes CSS

Photo par Alexandru Tugui sur Unsplash

Si vous construisez une application ou un site Web qui change souvent, les méthodes CSS modulaires résolvent de nombreux problèmes. Au lieu de copier votre structure HTML en CSS et de la décorer, vous créez des bibliothèques de composants consommables. Cela rend les projets plus évolutifs et garde la base de code CSS sous contrôle.

La modularité CSS repose sur la composition, ce qui engraisse inévitablement le HTML. Cet effet collatéral peut avoir un effet dissuasif important sur de nombreuses personnes en raison du «gonflement» qu'il crée.

Dans cet article, nous allons comparer deux techniques: l’enchaînement et l’extension. Nous verrons ce qu’ils fournissent et quelles sont leurs lacunes afin que vous puissiez faire des choix plus éclairés.

Chaînage

Le chaînage de classes CSS signifie la composition de l'apparence souhaitée en ajoutant des modificateurs granulaires à un sélecteur HTML. Les styles composites créent le résultat visuel final. C'est le comportement par défaut avec la plupart des méthodologies CSS modulaires.

Prenons le code OOCSS suivant pour un bouton:

.btn {
  bloc de visualisation;
  boîte-ombre: 0 0 5px 0 rgba (0, 0, 0, .2);
}
.btn-default {
  bordure: gris 3px;
}
.btn-primary {
  fond: violet; Couleur blanche;
}

Si vous deviez chaîner des modificateurs, votre code HTML ressemblerait à ceci:

Faisons maintenant quelque chose de plus complexe, cette fois avec BEM (bloc, élément, modificateur):

    ...      
...

Ici nous avons beaucoup plus de classes en interaction:

  • Le bloc .media-object a plusieurs modificateurs (.media-object - reverse et .media-object - décrit).
  • L'élément .media-object__img a un modificateur (.media-object__img - faded).
  • L'élément .media-object__img est également un bloc .img avec son propre modificateur (.img - carré).

Avantages

Le point fort des classes d'enchaînement est la responsabilité séparée. Il garde votre base de code CSS propre, légère, agréable à lire et non répétitive. Chaque classe est parfaitement claire et vous savez immédiatement ce que vous devez utiliser et ce que vous ne devriez pas utiliser.

Cela évite également le code mort: puisque vous avez affaire à des blocs de construction, tout est potentiellement utile. Lorsque vous supprimez un composant, il vous suffit de supprimer le code HTML.

Les modificateurs séparés sont parfaits pour représenter l'état. Cela facilite donc la vie des ingénieurs JavaScript. Tout ce qu'ils ont à faire est d'ajouter et de supprimer des classes.

Sur les grands projets, cette méthode peut vous faire gagner beaucoup de temps.

Les inconvénients

L'un des problèmes les plus courants que rencontrent les utilisateurs de CSS modulaire est la création de «folie de classe» dans le code HTML. Strictement parlant, c'est vrai.

Les modèles de conception qui divisent les responsabilités se traduisent presque toujours par davantage de fichiers et de code détaillé. CSS ne fait pas exception: si vous choisissez une méthode supposée améliorer la facilité de maintenance de votre base de code, la contrepartie est de longs fichiers HTML.

Devoir taper autant de code devient de moins en moins un problème, car la plupart des éditeurs et des IDE offrent un autocomplétion puissant. Mais maintenant, c’est encore plus de code à écrire chaque fois que vous créez une nouvelle page ou composez un nouveau composant. Au fil du temps, cela peut induire un sentiment d'encombrement et de redondance qui rebuterait certains développeurs.

Extension

Si vous ne souhaitez pas chaîner les classes, vous pouvez les étendre. Nous avons toujours les mêmes blocs séparés, mais au lieu de les chaîner dans le code HTML, nous héritons des propriétés de la classe de base pour ses modificateurs. De cette façon, nous pouvons les utiliser tous en même temps.

Utilisons la fonction @extend dans Sass pour le faire:

.btn {
  bloc de visualisation;
  boîte-ombre: 0 0 5px 0 rgba (0, 0, 0, .2);
  &-défaut {
    @extend .btn;
    bordure: gris 3px;
  }
  & -primary {
    @extend .btn;
    fond: violet;
    Couleur blanche;
  }
}

Cela se transformera en l'extrait de code CSS suivant:

.btn,
.btn-default,
.btn-primary {
  bloc de visualisation;
  boîte-ombre: 0 0 5px 0 rgba (0, 0, 0, .2);
}
.btn-default {
  bordure: gris 3px;
}
.btn-primary {
  fond: violet; Couleur blanche;
}

Avec le CSS ci-dessus, notre code HTML ressemblerait à ceci:

Au lieu d'avoir une multitude de classes apparemment répétitives, nous n'en avons qu'une. Il porte un nom explicite et maintient le code lisible. Nous pouvons toujours utiliser .btn seul, mais si nous avons besoin d’une variante, il suffit d’ajouter la partie modificateur dessus au lieu d’enchaîner une nouvelle classe.

Avantages

Le point culminant de cette méthode est un HTML sans encombrement, plus lisible et plus léger. Lorsque vous optez pour le CSS modulaire, vous décidez également de faire plus de HTML et moins de CSS. Le CSS devient une bibliothèque au lieu d'une liste d'instructions. Ainsi, vous passez plus de temps dans le code HTML, raison pour laquelle vous voudrez peut-être le garder léger et facile à lire.

Les inconvénients

Votre CSS peut sembler DRY, en particulier si vous utilisez un pré-processeur, mais l’extension de classes entraîne un fichier CSS beaucoup plus lourd. De plus, vous n’avez pas beaucoup de contrôle sur ce qui se passe: chaque fois que vous utilisez @extend, la définition de la classe est déplacée en haut et ajoutée à une liste de sélecteurs partageant le même jeu de règles. Ce processus peut entraîner des remplacements de style étranges et beaucoup plus de code généré.

Il y a aussi le cas de vouloir utiliser plusieurs modificateurs ensemble. Avec la méthode extend, vous ne composez plus en HTML. Si vous allez créer de nouvelles combinaisons, il vous reste une solution: créez encore plus de classes en étendant les modificateurs. Cela est difficile à maintenir et entraîne plus de code. Chaque fois que vous devez fusionner des classes, vous devez modifier le CSS et créer une nouvelle règle potentiellement non réutilisable. Si vous supprimez le code HTML qui l’utilise, vous devrez également supprimer la classe CSS.

Après les pensées

Les CSS modulaires coûtent au format HTML plus détaillé, mais n’ont pas grand-chose à payer pour tous les avantages qu’il offre. Si vous avez déjà déterminé que vous avez besoin de modularité, ne vous tirez pas une balle dans le pied en utilisant des pratiques incompatibles. Cela entraînera plus de travail pour la moitié des bénéfices. L'héritage est tentant, mais la composition a plus d'une fois été reconnue comme une stratégie bien meilleure.

Le «gonflement» du langage HTML n’est pas un problème si l’on considère son impact réel. La modularité crée inévitablement plus de code - la méthode que vous choisissez détermine uniquement son orientation. Du point de vue des performances, plus de HTML est bien meilleur que plus de CSS.

Ne vous concentrez pas sur de petites choses qui ne comptent pas. Utilisez plutôt des outils qui vous aident à écrire et à naviguer dans le code plus efficacement. Essayez de regarder la grande image et faire des choix basés sur des faits, pas de préférences personnelles.

Publié à l'origine sur frontstuff.io.