Les combo class vous permettrons de réutiliser facilement le setup d'une classe en ajoutant quelques différences 🙌 Il faut cependant ne pas en abuser car cela peut vite devenir plus pénible qu'avantageux...
Avant de lire cet article, je vous conseille d'avoir lu celui traitant des bases des classes 😉 Comment nommer ses classes sur Webflow
On appelle "combo class", une classe qui viendrait s'ajouter à la première pour changer une ou deux caractéristiques sur celle-ci.
Dans l'image ci dessus, si nous changeons la forme ou la taille des ronds colorés, nous n'avons certainement pas envie de le faire sur chacun (il y a en a encore en dessous en plus... 😱). C'est donc l'exemple parfait pour la combo class :
Et si nous jetons un coup d'oeil dans le style manager, nous pouvons voir qu'il y en a encore un paquet de déclinaisons ! 😁Mais en modifiant "color-color" nous pouvons modifier tous les éléments en même temps (sauf ce qui est modifié par les combo class, évidement)
Et rien de mieux qu'une petite vidéo pour vous convaincre... Modification en live des border radius de ces petits éléments 🤩
Maintenant que vous êtes convaincu, il faut savoir qu'il n'est pas recommandé d'utiliser plus d'une combo class à la fois ☝. En d'autres mots, il n'est pas recommandé d'avoir plus de deux classes sur un élément (la classe principale, puis la potentielle combo class).
Tout comme les classes "principales" il est important de les nommer de manière cohérente et compréhensible par le reste de votre équipe.
Quelques pistes de nos experts pour les nommer :
- En fonction de la couleur qu'elles changent (ex : blue, green, red)
- En fonction de sa position dans la page (ex : hdp, navbar, hero)
- En fonction de ce qu'elle modifie (ex : 30pxMarginTop, 10pxRadius, hiddenMobile)
- Avec un chiffre pour faire la déclinaison d'un élément (ex : 1, 2, 3)
Pour modifier la classe principale sur un ou deux points.
Je pense que cette phrase résume bien quand il peut être intéressant d'utiliser une combo class plutôt que de créer une nouvelle classe.
Pour donner quelques cas concrêts :
Mais garder à l'esprit que si vous cumuler plus de deux de ces changements, il est préférable de passer à une toute nouvelle classe !
Lorsque l'on dépasse les deux modifications par rapport à la classe principale.
Une classe est censée regrouper des éléments de même type, qui se ressemble et que l'on souhaiterait modifier en même temps.
Lorsque les différences s'accumulent, il devient compliqué de gérer les héritages dûs aux combos class et il devient bien plus intéressant de créer une classe complêtement à part pour l'élément.
Si vous voulez en savoir plus sur le nommage des classes, vous pouvez aller lire l'article donné au tout début de celui-ci (que vous devriez déjà avoir lu d'ailleurs 😡)