Maîtriser la spécificité CSS : le guide ultime pour Webflow

Très bien, ninjas de Webflow, il est temps de s'attaquer à ce problème qu'est la spécificité CSS. Et pour le rendre aussi complet que possible, nous verrons également comment le système Client-First de Finsweet peut vous aider à garder votre CSS propre et facile à gérer, tout en réduisant la taille de cette ancienne feuille de style. Aujourd'hui, nous ne sommes qu'un petit studio Webflow, mais nous avons débuté dans ce jeu un peu avant d'utiliser Webflow. Nous avions donc une assez bonne compréhension du CSS, mais nous sommes parfaitement conscients que de nombreux concepteurs de Webflow apprennent le CSS pour la première fois dans Webflow, et il n'y a rien de mal à cela. Se familiariser avec les spécificités CSS le plus rapidement possible facilite grandement les choses pour un développeur Webflow. Mais assez de cela, plongeons-nous directement dans le vif du sujet.

Qu'est-ce que la spécificité CSS ?

Considérez la spécificité CSS comme un système de points dans lequel différents types de sélecteurs apportent différentes valeurs au score de spécificité. Plus la spécificité est élevée, plus la règle est prioritaire. Voici une ventilation de la hiérarchie des spécificités :

1. Styles intégrés: 1000 points. Ce sont les plus spécifiques.
2. Identifiants: 100 points. C'est très précis.
3. Classes, attributs et pseudo-classes: 10 points chacun. Modérément spécifique.
4. Éléments et pseudo-éléments: 1 point chacun. Le moins spécifique.

Exemple de calcul:

• #header = 100 points (sélecteur d'identification).
• .menu .article = 10 + 10 = 20 points (deux sélecteurs de classe).
• ul li a = 1 + 1 + 1 = 3 points (trois sélecteurs d'éléments).

Décomposons-le plus en détail avec d'autres exemples pour clarifier le fonctionnement de la spécificité dans des scénarios réels.

Exemple 1 : combinaison de sélecteurs

Tenez compte des règles suivantes :

Une ancre <!-- fs-richtext-ignore --><a>dans un élément avec l'ID #nav et la classe .nav-item sera rouge en raison de la spécificité de 11 points à partir du .nav-item a sélecteur, qui a une spécificité plus élevée que .nav-item.

Exemple 2 : Spécificité prépondérante

Tenez compte des règles suivantes :

UNE <!-- fs-richtext-ignore --><p>élément au sein d'un élément avec l'ID #content et classe .rubrique aura un fond jaune en raison de la spécificité plus élevée du sélecteur d'identification.

Spécificité dans Webflow

Webflow est fantastique pour la conception visuelle de sites Web, mais en gros, tout est en CSS. Comprendre la spécificité peut vous aider à comprendre pourquoi certains styles ne s'appliquent pas.

Exemple dans Webflow

Supposons que vous disposez des règles CSS suivantes :

Un paragraphe à l'intérieur d'un élément avec l'ID #hero et classe .en-tête sera rouge, en raison de la spécificité plus élevée du sélecteur d'identifiant.

En développant cela, examinons un exemple plus complexe :

Ici, un h2 à l'intérieur d'un élément avec l'ID #main -content et classe .article aura une taille de police de 2e.

Concepteur de flux Web

Cela semble très simple, bien sûr, c'est un peu différent dans Webflow, c'est une plateforme de développement visuel, alors qu'est-ce que c'est quoi, où est-ce que je le vois, et qu'est-ce qui s'applique à quoi ?

Toutes ces questions sont tout à fait valables car le fait de regarder l'élément uniquement dans le concepteur, comme dans l'image ci-dessous, ne vous dira pas grand-chose à part le nom de la classe.

Alors, que vous dit ce que vous dit le Designer ? Tout d'abord, nous pouvons facilement voir la structure, ce qui nous aide immédiatement.

Mais surtout, nous pouvons voir exactement de quoi l'élément hérite en cliquant juste au-dessus du nom de la classe à droite du Designer.

Le système axé sur le client de Finsweet

Le système Client-First de Finsweet change la donne en matière de gestion et d'évolutivité de vos projets Webflow. Il met l'accent sur une approche structurée du CSS qui le rend facile à comprendre et à gérer.

Principes fondamentaux de la priorité donnée au client

• Classes mondiales: définissez des styles généraux qui peuvent être réutilisés dans l'ensemble de votre projet.
• Classes de composants: Spécifique aux composants individuels, ce qui rend les styles modulaires.
• Classes d'utilité: Classes à usage unique pour des modifications mineures.

Exemple:

Développement du système Client-First de Finsweet :

Types de cours dans Client-First

1. Classes d'utilité: Appliqué globalement, pour des propriétés CSS spécifiques.
   • Exemple : .background color-primary {couleur d'arrière-plan : #ff0000 ;}
2. Classes personnalisées: Spécifique à des composants ou à des éléments, souvent soulignés.
   • Exemple : header_background layer
3. Classes mondiales: Utilisé tout au long du projet, garantissant l'uniformité.
   • Exemple : .margin-large {marge : 3rem ;}

Utilisation de classes combinées

Les classes combinées dans Client-First utilisent une classe de base et ajoutent des variantes à l'aide de c'est- préfixe.

• Exemple : le bouton est principal {background : #007bff ;}

Évitez l'empilage profond

L'empilement profond fait référence à l'empilement de nombreuses classes sur un élément, ce que Client-First déconseille. Utilisez plutôt des noms de classe clairs et organisés pour garantir la lisibilité et la facilité de gestion.

• Exemple d'empilage profond : class="text-bold text-grand−text-center »
• Meilleure approche : utilisez une seule classe personnalisée telle que .en-tête-texte

Conseils pratiques pour gérer la spécificité

1. Évitez les styles en ligne: Ils ont la plus grande spécificité et peuvent remplacer tout le reste.
2. Utilisez les sélecteurs d'identification avec parcimonie: Ils peuvent compliquer votre CSS s'ils sont trop utilisés.
3. Organiser les styles de manière hiérarchique: utilisez des systèmes tels que Client-First pour que votre CSS reste modulaire et facile à gérer.
4. Tirez parti du concepteur de Webflow: Les outils visuels peuvent vous aider à visualiser et à gérer efficacement vos styles, mais il peut être difficile de les réorganiser une fois que vous avez commencé. Clonez toujours le Finsweet Client-First Cloneable ou d'autres outils comme Relume si vous souhaitez suivre cette voie.
5. Utilisez l'extension Finsweet Chrome pour réorganiser: N'oubliez pas qu'il s'agit d'une avancée et que vous devriez être à l'aise dans votre compréhension de la spécificité CSS, mais l'extension Finsweet vous permet de réorganiser les classes dans Webflow.