Stratégie des classes [Partie 1]

Les types de classes

Les classes utilitaires (Utility Class)

C’est une classe créée avec une combinaison spécifique de propriétés CSS qui peut être appliquée à différents éléments de manière globale dans le projet.

Toutes les classes utilitaires sont des classes globales par nature. Le concept d'une classe utilitaire est que c’est une classe qui permet (et permettra) d'appliquer des propriétés CSS globales au sein du projet.

Par exemple, la classe utilitaire background-color-gray est ajoutée par défaut dans le projet de démarrage Client-First pour vous aider à organiser et à gérer les couleurs d'arrière-plan couramment utilisées dans vos projets.

Ont aussi été ajoutés des classes utilitaires comme font-size-large dans le projet de démarrage Client-First, pour vous aider à organiser et à gérer les tailles de la typographie de façon unifiée dans l'ensemble du projet.

Les classes utilitaires n'utilisent pas de trait de soulignement (_) dans le nom de la classe.

Les classes personnalisées (Custom class)

Une classe personnalisée est créée pour un composant spécifique, une page, un groupe d'éléments ou bien un élément unique. Nous appelons cette classe "personnalisée" car les attributs CSS que nous souhaitons lui affecter sont hors champ des classes utilitaires de notre projet. 

Nous appelons cette classe "personnalisée" car les attributs CSS que nous souhaitons lui affecter sont hors champ des classes utilitaires de notre projet.

Les classes personnalisées doivent être créées lorsque les classes utilitaires ne peuvent pas, ou ne doivent pas, être utilisées sur un élément. La classe est donc personnalisée pour cet élément.

Par exemple, une classe pour styliser un élément spécifique dans les en-têtes globaux du projet, header_background-layer.

Par exemple, une classe qui viendra styliser un élément spécifique dans la le slider de témoignage, testimonial-slider_headshot.

Dans Client-First, les classes personnalisées utilisent un trait de soulignement (_) dans le nom de la classe.

Les classes globales (Global Class)

Une classe globale est destinée à être utilisée dans l'ensemble du projet. Les classes utilitaires et les classes personnalisées peuvent être des classes globales.

Une classe globale applique des styles qui resteront unifiés dans l'ensemble du projet. Une classe globale n'est pas destinée à un élément spécifique.

"Global" signifie partout et n'importe où dans le projet.

Toutes les classes utilitaires sont des classes globales. Les classes utilitaires sont globales par nature.

Par exemple, les classes margin et padding sont des classes utilitaires globales. margin-large a une valeur de marge de 3rem. Lorsque nous mettons à jour cette valeur à 4rem, chaque instance qui utilise margin-large sera affectée automatiquement par la mise à jour à 4rem.

margin-large est un contrôleur global qui modifie la valeur de notre marge dans l'ensemble du projet. Nous pouvons apporter des modifications importantes et globales à notre projet lorsque nous utilisons correctement les classes utilitaires globales.

Les classes globales ne se limitent pas/plus aux classes utilitaires. Les classes globales sont maintenant plus clairement définies comme tout type de classe qui a l'intention d'avoir une gestion globale des styles sur l'ensemble du site.

Dans Client-First v2, nous expliquons et encourageons mieux l'utilisation des classes personnalisées comme classes globales.

Par exemple, faq_item peut être une classe personnalisée globale. Si, nous avons de nombreuses sections FAQ sur l'ensemble de notre site Webflow, faq_item sera utilisé pour gérer l’ensemble des éléments FAQ sur le du projet.

Par exemple, header_content peut aussi être une classe personnalisée globale. Nous avons un composant d'en-tête sur chaque page du projet. Cette classe permet de gérer la personnalisation de ce “wrapper” de contenu, de façon globale et unifiée dans l'ensemble de notre projet.

Les classes combinées (connues comme “Combo Class”)

Une classe combinée est une variante d'une classe de base. Une classe combinée hérite des styles de la classe de base et on y ajoute d'autres nouveaux styles, grâce à la combinaison de propriétés CSS.

Nous définissons la "classe de base" comme la première classe de notre liste de classes combinées. Nous ajoutons ensuite une classe par-dessus la classe de base pour créer une variation unique (par effet d’empilement).

La classe ajoutée qui donne la variation unique utilise le préfixe de classe  is-.

La classe combinée empilée ne fonctionnera que si elle est combinée avec la ou les classes de base qui la précèdent. Dans la vidéo ci-dessous, comprenez que is-blue ne fonctionne pas seul. Elle ne fonctionne qu'en tant qu'ajout à la classe de base button.

‍

Les classes combinées peuvent être créées, de base, à partir d'une classe personnalisée ou utilitaire. L'exemple ci-dessus du button is-blue montre une classe utilitaire, utilisée comme classe combinée.

Nous pouvons également créer une classe combinée pour une classe personnalisée. Par exemple, header_content is-home. Il s'agit d'une variante de la classe personnalisée header_content.

Préfixe is-

Nous définissons une classe combinée dans Client-First avec le préfixe is-. (is- se traduit de l’anglais par “est-”). Lorsque nous voyons is-, nous savons que cette classe est créée par l’effet d’une classe combinée empilée sur une classe de base.

Ne pas multiplier les empilements de classes

Client-First a une règle universelle : ne pas trop empiler les classes. DEEP-STACK

DEEP-STACK - plusieurs classes sont "empilées" sur un élément.

DEEP-STACKING - l'action d'empiler plusieurs classes sur un élément.

Il s'agit d'un terme créé par Client-First pour répondre aux problèmes que nous rencontrons avec les classes empilées dans le Designer Webflow.

Client-First ne recommande pas la stratégie d'empilement de classes dans Webflow.

Exemple de DEEP-STACK :

Avec Client-First, nous voulons éviter l'empilement profond de classes comme celle-ci dessus. Dans la documentation, nous verrons comment éviter l'empilement profond, mais en attendant voici une liste rapide de raisons :

Les raisons pour lesquelles nous ne faisons pas de “deep-stack”.

L’impossibilité de réorganiser les styles dans le panneau des styles du Designer Webflow.

Nous ne disposons pas d'un contrôle libre sur les classes empilées dans Webflow. 

Si nous devons modifier ou supprimer une classe qui est dans l’empilement, nous devons supprimer toutes les classes "par-dessus" avant d'accéder à la classe précédente. Et il n’est pas possible de réorganiser la hiérarchie des classes différemment. 

Dans le cas ci-dessous, vous pouvez voir que nous devons supprimer certaines classes si nous voulons changer le poids du texte de text-weight-medium à text-weight-bold :

Ce problème devient extrême lorsque l'on effectue des modifications sur des media queries inférieures (breakpoint : tablette, mobile, etc). Et nous avons encore moins de contrôle sur l'édition lorsque nous modifions les points d'arrêt en dehors des points d'arrêt de base.

Ralentissement du flux de travail. Nécessite de nombreuses étapes pour de petites modifications

Le flux de travail ci-dessus prend beaucoup de temps à réaliser. Si c'est une pratique régulière dans notre projet, le temps de développement et de maintenance sera plus long.

Courbe d'apprentissage plus longue.

Nous pensons que le deep-stacking entraîne une courbe d'apprentissage plus longue. Il est plus complexe de comprendre ce que font les classes et comment les gérer.

Écrire du CSS dans Webflow est rapide

L'écriture de CSS est rapide et efficace grâce au panneau de styles de Webflow. Nous pouvons créer une nouvelle classe et ajouter visuellement des propriétés CSS à cette classe. Ce processus est très rapide dans Webflow, et nous en profitons dans Client-First.

L’économie de poids (kb) du CSS n’est pas significatif

Lorsque nous utilisons des classes globales dans un projet, nous pouvons réduire la taille de notre fichier CSS (Kb). Nous ne pensons pas que ces petites économies de CSS l'emportent sur les avantages de la création de classes personnalisées dans Webflow.

Vous en apprendrez plus sur l'empilement des classes plus tard avec :

L’explication complète de chacun de ces points dans la stratégie des classes [Partie 2].

‍

Utiliser les classes personnalisées

Les classes personnalisées sont une méthode puissante et recommandée dans Client-First.

Nous utilisons les classes personnalisées pour les raisons suivantes

1. Modifier facilement des éléments spécifiques. Si nous utilisons un système organisé de classes personnalisées, nous pouvons apporter rapidement des modifications uniques à des éléments et composants spécifiques de notre projet. Sans risquer de tout casser !
2. Éviter l'utilisation de classes utilitaires partout dans notre projet. Les systèmes de classes utilitaires sont puissants mais ne doivent pas être utilisés pour construire l'ensemble du projet. Lorsque l'utilisation d'une classe utilitaire rend notre travail de développeur Webflow plus compliqué, nous encourageons la création d'une classe personnalisée. Il doit y avoir un avantage clair à utiliser une classe utilitaire.
3. Pour éviter l'empilement profond (DEEP-STACKING). Cet empilement peut être remplacé par une classe personnalisée, beaucoup plus flexible.

Exemple de texture d'arrière-plan

Par exemple, nous voulons donner un style à la texture d'arrière-plan d'un composant.

Nous pourrions être en mesure de styliser notre texture d'arrière-plan avec trois classes empilées. Par exemple, background-absolute + fit-size + opacity-low. Une fois combinées, ces trois classes nous donnent la combinaison de styles dont nous avons besoin.

Mais, au lieu d'empiler plusieurs classes pour obtenir cette texture d'arrière-plan, nous pouvons créer une classe personnalisée appelée services-item_background-texture. Cette classe indique clairement qu'elle est destinée à "une texture qui se trouve sur l'image d'arrière-plan d'un élément de services".

Nous pouvons maintenant modifier rapidement et plus librement cette classe personnalisée au lieu de réorganiser l’ensemble des classes empilées. 

Donc, si nous avons besoin d'un style unique, nous créons une classe personnalisée prête à appliquer ce style unique.

Développement CSS traditionnel

Dans le cadre d'un développement CSS traditionnel, une solution de classes empilées pourrait être la meilleure solution. Les classes empilées nécessitent moins de CSS à écrire à la main, ce qui permet un développement plus rapide.

Cependant, il ne s'agit pas ici d'un développement CSS traditionnel. Il s'agit de Webflow. Et la méthode Client-First est un ensemble de principes créés spécifiquement pour Webflow.

Dans Webflow, nous pensons qu'il faut moins de temps et d'efforts pour créer et gérer les styles d'une classe personnalisée sur un élément que de gérer une liste de classes empilées.

Il y a une explication complète de la création de classes personnalisées dans la stratégie des classes [Partie 2].

La convention de nomination

Créez des noms clairs et spécifiques pour les classes.

Un développeur Webflow, un client ou toute autre personne devrait comprendre ce que fait la classe en se basant sur son nom, même s'il n'a jamais entendu parler de Client-First auparavant.

L’état d’esprit derrière la nomination des classes

Les objectifs de la convention de nomination "Client-First”

• Permettre à une personne non technique de gérer le site Web.
• Être clair, informatif et descriptif dans la dénomination des classes.
• Donner au lecteur le plus de contexte possible sur l'objectif de cette classe.
• Á la lecture du nom d'une classe et savoir quel est son objectif.
• Pas d'abréviations, pas de raccourcis, pas de confusion.
• Donner autant de contexte que possible à la relation entre cette classe et le site Web.
• Créez des noms basés sur des techniques d'organisation.
• Utiliser des mots-clés pour rechercher rapidement les classes disponibles dans le panneau de styles.
• Visualiser l'objectif d'une classe à partir de son nom.

Les questions à se poser pour nommer les classes

Les noms des classes doivent dire ce qu'elles font. Lorsque l'on crée un nom pour une classe, nous pouvons donc se poser ces questions :

• "Que fait cette classe dans le projet ?"
• "Quel est le but de cette classe dans le projet ?"
• "Comment puis-je donner le plus de contexte possible à ce dont cette classe est responsable dans le projet ?"

Le nom d'une classe devrait répondre à ces questions.

Un développeur Webflow, un client ou un(e) responsable marketing doit pouvoir comprendre ce que fait la classe en se basant sur son nom, même s'il n'a jamais entendu parlé de Client-First auparavant.

Des noms et des mots-clés significatifs

Un mot-clé fort donne le contexte de ce que fait cette classe/élément. Une dénomination aussi descriptive que possible nous aidera à rester organisés.

Les mots-clés et la clarté de la dénomination sont des concepts fondamentaux de l'approche Client-First. Le nom de chaque classe doit servir un objectif significatif. Nous devons donner à la prochaine personne qui entre dans le projet autant de contexte possible sur le but de la classe.

Dans le nom d’une classe, les mots-clés vont du général au spécifique

Prenons l'exemple de text-size-large.

Le mot-clé le plus général dans le nom de cette classe est text. Ce mot nous indique que cette classe a trait à un élément de type texte.

size nous indique que nous travaillons sur la personnalisation de la taille du texte. Le mot "size" est plus spécifique car il se rapporte à une propriété CSS particulière du texte - ^font-size.

Enfin, nous avons le mot large qui nous donne des informations plus précises sur la valeur de la taille du texte. Il s'agit d'une grande taille de texte.

Remarquez que nous n'appelons pas cette classe large-size-text. Bien que cela puisse être aussi clair que text-size-large, nous bénéficions d'avantages significatifs dans le mode Client-First lorsque nous suivons une convention de dénomination de classe générale à spécifique. 

Nous permettons une recherche plus intelligente des classes et une organisation plus propre des dossiers. Nous en apprendrons davantage à ce sujet tout au long de la documentation.

Voyons un exemple utilisant une classe personnalisée, team-list_headshot-wrapper.

Le nom du dossier est team-list_, ce qui nous indique que cet élément a quelque chose à voir avec la page de l'équipe ou une section de l'équipe et est une liste. "Team list" est le nom du groupe contenant les éléments spécifiques.

headshot devient plus spécifique et nous indique que cet élément a quelque chose à voir avec l'élément headshot (photo d'identité en français) de la liste d'équipe.

wrapper devient encore plus spécifique et nous dit que cela enveloppe l'élément headshot.

La lecture du nom de la classe team-list_headshot-wrapper est claire et logique, même si l'utilisateur ne comprend pas le CSS qui la sous-tend. L'utilisateur comprendra que l'édition de cette classe fera [quelque chose] aux headshots (photo d’identité) de la liste d'équipe. C'est une excellente indication pour la prochaine personne qui participera au projet.

Imaginez maintenant que vous ajoutiez d'autres éléments à l'intérieur de notre “headshot wrapper”. Nous pouvons rester très organisés grâce à une convention de dénomination générale à spécifique.

team-list_headshot-wrapper

team-list_headshot-image

team-list_headshot-texture-layer

team-list_headshot-background

Notre liste de classes pour la liste d'équipe est très organisée et logique dans notre projet. Cette convention de nomination s'intègre aussi très bien dans notre fonctionnalité Folders (dossiers).