Comment nommer ses classes sur Webflow ?

Structure globable à adopter

Ce n'est pas "la règle universelle que tout le monde doit suivre" mais c'est celle que nous appliquons chez FlowAgency et qui regroupe de nombreuses best-practices du web concernant le nommage des classes 😉

Votre site peut être découpé en section avec des "thèmes" différents (par exemple, le bloc équipe, le bloc valeurs, le bloc job, etc)

1️⃣ Premièrement, un "div block" avec la class "section" qui, sauf exception, aura un padding haut et bas.

2️⃣ Deuxièmement, à l’intérieur de la "section" se trouvera un "div block" avec la class "container" qui, sauf exception, aura une marge droite et gauche de 10% sur le format web et 5% sur tablette et moins.

Vous pouvez aussi lui mettre une "max width" de 1200px (ou ce qui vous convient) pour éviter que le site soit disproportionné sur les écrans trop larges 😊

Vous pourriez utiliser les bloc "section" et "container" directement, mais avec une simple div vous pouvez vraiment structurer le tout comme vous le souhaitez, sans contraintes inéditables.

‍

3️⃣ Ensuite, à l'intérieur du "container" se trouvera un div block avec la class "block-nomDuBlock", "nomDuBlock" étant à définir en fonction de ce qui paraît le plus simple à comprendre.

4️⃣ Finalement, pour les éléments qui composent votre bloc, nous vous conseillons de commencer par "nomDuBlock" ("equipe" par exemple) suivit par le "nom de l'élément" ("grille" ou "image" par exemple), le tout joint par un "-". Ce qui donnerait quelque chose comme "team-grid" ou "team-image".

Si la classe existe déjà (vous pouvez avoir plusieurs types d'images ou de grilles dans votre bloc equipe, par exemple), ajouter simplement un chiffre à la suite : "team-grid1" et "team-grid2".

On peut remarquer que "subtitle" et "button3" sont des blocs que l'on retrouvera à d'autres endroit du site, alors que le "rightLeft2-p1" ne se trouvera que à cet endroit du site 😃

Maintenant que vous avez les bases, continuons avec des petits détails 👇

Utiliser des noms "parlants"

... et surtout si vous travaillez en équipe !

Si vos classes sont bien nommées et qu'elles permettent facilement d'identifier l'élément sur lequel elles se trouvent ou ce qu'elles font, vous gagnerez un temps important ! D'autant plus si le site est voué à être passé entre les développeurs ou donné au client par la suite ! ✨

Un même élément, une même classe !

Oui, dit comme ça, vous n'allez pas me contredire 😂 Mais en même temps, quand vous serez le nez dans le guidons, plongé dans votre développement, vous verrez qu'il est vite possible de mettre des classes différentes sur des éléments similaires! Et pourtant... Cela vous compliquera tellement la vie quand vous devrez faire une toute petite modification sur chaque bloc un par un...😔

Globalement, tous les éléments utilisés plusieurs fois sur votre site doivent avoir une classe identique. Si certains blocs ont des petites variantes et que vous voulez savoir comment les gérer, continuer la lecture, on vous explique tout ça ! 👇

Utiliser une "combo classe" pour les petites différences

Les combos classes permettent très facilement de créer des différences sur des éléments très proches en ajoutant une seconde classe. C'est aussi ce qui rend si important le point au dessus ✨ Attention cependant à ne pas les utiliser sur des éléments trop différents : une ou deux différences, ok pour la combo classe, mais au delà ce sera plus pénible que pratique.

Ces deux boutons ont exactement la même forme, mais la couleur change ? Combo classe. Ces sections ont les mêmes caractéristiques mais pas la même couleur de fond ? Combo classe ! Ces textes ont la même typographie, dans deux couleurs différentes ? ... Combo classe !! (je crois que vous avez compris, je m'arrête là 😁)

Aller, je ne vais pas plus m'étaler sur le sujet ici, nous avons un article dédié pour le juste là 👉lien de la vie éternelle (non, juste des combo classes, mais c'est déjà pas mal 😜)

Utiliser une autre classe pour les plus grosses différences

Sur des sites complets, vous pouvez vous retrouvez avec des blocs de même type mais avec plus de deux différences. Un exemple tout simple serait un bouton et sa déclinaison avec une bordure, un arrondie et une couleur différente.

Dans ce cas là, au lieu d'utiliser la combo classe, vous pouvez tout simplement créer une nouvelle classe en décrivant concisément ses caractéristiques ou bien son positionnement s'il n'est qu'à un unique endroit du site. Un exemple s'impose ! 😀

Je pourrais avoir un "button-noBorderRed" et un "button-blue", ou bien "button-contact" et "button-blue" si mon bouton rouge n'est utilisé que pour amené l'utilisateur à entrer en contact.

Ne pas mettre de caractère spéciaux

Evitez les espaces, accents, apostrophes et tout ce qui va avec ! Vos classes doivent être écrites avec des chiffres et des lettres uniquement, majuscules et minuscules pour plus facilement différencier les mots et des traits d'union ou underscore.

Eviter tous ces caractères spéciaux vous évitera bien des ennuis d'encodage ou de frappe !

Privilégier l'anglais

Vous l'avez peut-être remarqué dans l'article, mais privilégier l'anglais reste une des best practice dans le développement, web ou non 😉

‍