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

Bon, ninjas de Webflow, il est temps de s'attaquer à la bête qu'est la spécificité CSS. La spécificité CSS est l'ensemble des règles qu'un navigateur utilise pour décider quelle règle CSS l'emporte quand plusieurs règles ciblent le même élément. Et pour que ce guide soit aussi complet que possible, nous verrons aussi comment le système Client-First de Finsweet peut garder votre CSS propre et maintenable, et garder cette vieille feuille de style légère. Nous ne sommes plus aujourd'hui qu'un petit studio « uniquement » Webflow. Nous avons commencé dans ce métier un peu avant d'utiliser Webflow, donc nous avions une assez bonne compréhension du CSS, mais nous savons très bien que beaucoup de designers Webflow apprennent le CSS pour la première fois dans Webflow, et il n'y a rien de mal à cela. Maîtriser la spécificité CSS le plus tôt possible rend tout bien plus simple pour un développeur Webflow. Mais assez parlé, mettons-nous au travail.

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

Voyez la spécificité CSS comme un système de points où différents types de sélecteurs apportent des valeurs différentes au score de spécificité. Plus la spécificité est élevée, plus la règle est prioritaire. Voici le détail de la hiérarchie de spécificité :

1. Styles en ligne : 1000 points. Ce sont les plus spécifiques.
2. ID : 100 points. Très spécifiques.
3. Classes, attributs et pseudo-classes : 10 points chacun. Moyennement spécifiques.
4. Éléments et pseudo-éléments : 1 point chacun. Les moins spécifiques.

Exemple de calcul :

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

NB ! Ces points sont une façon pratique de raisonner, mais ils ne forment pas vraiment un score en base 10. Le navigateur compare les colonnes une à une, de la plus spécifique à la moins spécifique, si bien qu'un seul ID l'emporte sur n'importe quel nombre de classes. De plus, :where() n'ajoute aucune spécificité, tandis que :is(), :not() et :has() prennent la spécificité du sélecteur le plus spécifique placé entre les parenthèses. Si deux règles ont exactement la même spécificité, c'est celle qui vient en dernier dans la feuille de style qui l'emporte.

Voyons cela plus en détail avec d'autres exemples pour clarifier le fonctionnement de la spécificité dans des situations réelles.

Exemple 1 : combiner des sélecteurs

Prenons ces règles :

Une ancre <a> à l'intérieur d'un élément ayant l'ID #nav et la classe .nav-item sera rouge, en raison de la spécificité de 11 points du sélecteur .nav-item a, qui est plus élevée que celle de .nav-item. La règle #nav n'a pas voix au chapitre ici, car elle cible l'élément portant cet ID, et l'ancre ne fait qu'en hériter. Une règle qui cible directement l'ancre l'emporte toujours sur une valeur héritée.

Exemple 2 : surcharger la spécificité

Prenons ces règles :

Un élément <p> avec l'ID #content et la classe .section aura un fond jaune, grâce à la spécificité plus élevée du sélecteur d'ID.

La spécificité CSS dans Webflow

Webflow est fantastique pour le design web visuel, mais sous le capot, tout est du CSS. Comprendre la spécificité peut vous aider à déboguer les raisons pour lesquelles certains styles ne s'appliquent pas.

Exemple dans Webflow

Imaginons que vous ayez ces règles CSS :

Un paragraphe avec l'ID #hero et la classe .header sera rouge, grâce à la spécificité plus élevée du sélecteur d'ID.

Pour aller plus loin, regardons un exemple plus complexe :

Ici, un h2 à l'intérieur d'un élément de classe .article, lui-même placé dans un élément ayant l'ID #main-content, aura une taille de police de 2em.

Le Designer de Webflow

Cela paraît super simple, non ? Bien sûr, c'est un peu différent dans Webflow. C'est une plateforme de développement visuel, alors qu'est-ce qui est quoi, où le voir, et qu'est-ce qui s'applique à quoi ?

Toutes ces questions sont tout à fait légitimes, car regarder l'élément dans le Designer seul, comme sur l'image ci-dessous, ne vous apprendra pas grand-chose à part le nom de la classe.

Alors, qu'est-ce qui vous renseigne dans le Designer ? D'abord, on voit facilement la structure, ce qui nous aide tout de suite.

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

Le système Client-First de Finsweet

Le système Client-First de Finsweet change la donne pour garder vos projets Webflow organisés et évolutifs. Il met l'accent sur une approche structurée du CSS qui le rend facile à comprendre et à maintenir.

Principes de base de Client-First

• Classes globales : définissent des styles généraux réutilisables dans tout votre projet.
• Classes personnalisées : propres à chaque composant, ce qui rend les styles modulaires.
• Classes utilitaires : des classes à usage unique pour les petits ajustements.

Exemple (les noms de classes ci-dessous sont illustratifs, les vrais noms Client-First sont listés plus bas) :

Pour approfondir le système Client-First de Finsweet :

Les types de classes dans Client-First

1. Classes utilitaires : appliquées globalement, pour des propriétés CSS précises.
   • Exemple : .background-color-primary { background-color: #ff0000; }
2. Classes personnalisées : propres à des composants ou des éléments, souvent avec des tirets bas.
   • Exemple : header_background-layer
3. Classes globales : utilisées dans tout le projet, pour garantir l'uniformité.
   • Exemple : .margin-large { margin: 3rem; }

Utiliser les classes combo

Les classes combo dans Client-First utilisent une classe de base et ajoutent des variantes avec le préfixe is-.

• Exemple (notation du Designer, qui s'écrit .button.is-primary en CSS) : button is-primary { background-color: #007bff; }

Éviter l'empilement excessif

L'empilement excessif consiste à empiler de nombreuses classes sur un élément, ce que Client-First déconseille. Utilisez plutôt des noms de classes clairs et bien organisés pour garder le code lisible et facile à gérer.

• Exemple d'empilement excessif : class="text-bold text-large text-center"
• Meilleure approche : utiliser une seule classe personnalisée, comme .header-text

Pourquoi l'ordre des classes compte dans Webflow

Webflow écrit vos classes dans la feuille de style dans l'ordre où vous les avez créées, et quand deux classes ont la même spécificité, celle créée en dernier l'emporte. C'est pourquoi coller un système d'espacement dans le mauvais ordre peut le casser, et c'est exactement ce que corrige l'outil de réorganisation de l'extension Finsweet. Les classes combo sont l'autre moitié de l'histoire, et nous en avons parlé dans notre article sur l'ajout de modes de fusion CSS avec les classes combo et dans la création d'un résumé d'article avec les classes combo. Si vous hésitez sur Client-First lui-même, lisez si Finsweet Client-First vous convient.

Conseils pratiques pour gérer la spécificité

1. Évitez les styles en ligne : ils ont la spécificité la plus élevée et peuvent écraser presque tout le reste.
2. Utilisez les sélecteurs d'ID avec parcimonie : ils peuvent compliquer votre CSS s'ils sont trop employés.
3. Organisez les styles de façon hiérarchique : utilisez des systèmes comme Client-First pour garder votre CSS modulaire et maintenable.
4. Utilisez le Designer de Webflow : les outils visuels peuvent vous aider à visualiser et gérer efficacement vos styles, mais il peut être difficile de réorganiser une fois lancé. Clonez toujours le Cloneable Finsweet Client-First ou d'autres comme Relume si vous voulez suivre cette voie.
5. Utilisez l'extension Chrome Finsweet pour réorganiser : n'oubliez pas que c'est une manœuvre avancée et que vous devez bien maîtriser la spécificité CSS, mais l'extension Finsweet permet bien de réorganiser les classes dans Webflow.

FAQ sur la spécificité CSS

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

La spécificité CSS est le score qu'un navigateur attribue à chaque sélecteur pour décider quelle règle l'emporte quand plusieurs règles définissent la même propriété sur un seul élément. Les styles en ligne l'emportent sur les ID, les ID sur les classes, les attributs et les pseudo-classes, et ceux-ci sur les simples éléments et pseudo-éléments.

Comment calculer la spécificité CSS ?

Comptez les ID, puis les classes, attributs et pseudo-classes, puis les éléments et pseudo-éléments du sélecteur, et comparez les totaux de gauche à droite. Ainsi, #header l'emporte sur .menu .item, et .menu .item l'emporte sur ul li a.

Qui l'emporte quand deux sélecteurs ont la même spécificité ?

Celui qui vient en dernier dans la feuille de style. Dans Webflow, cela signifie la classe créée en dernier, ce qui explique pourquoi l'ordre des classes compte et pourquoi l'extension Finsweet peut les réorganiser.

!important écrase-t-il la spécificité ?

Oui, une déclaration !important l'emporte sur les déclarations normales, et c'est la seule chose qui peut écraser un style en ligne. Utilisez-la en dernier recours, car elle rend votre CSS beaucoup plus difficile à déboguer.