La spécificité CSS est un sujet que de nombreux nouveaux codeurs frontaux évitent aussi longtemps que possible. Cela semble compliqué, il y a toutes ces règles, vous pourriez même avoir à faire des calculs! Comment est-ce boiteux?
En fin de compte, vous ne pouvez l’éviter que si longtemps. La spécificité est un concept essentiel que vous devez maîtriser pour être un développeur efficace. Aujourd'hui, je vais vous expliquer les concepts de spécificité d'une manière simple et facile à comprendre. C'est plus facile que vous ne le pensez!
Le concept de base de la spécificité
La spécificité est un mot amusant. Dès le début, cela communique l’idée que cela va être compliqué. Heureusement, son écorce est plus grosse que sa piqûre. Il n'y a aucune raison pour que vous ne puissiez pas choisir plus de ce genre de choses dans quelques minutes ou moins.
Pour décomposer l'application pratique de la spécificité en quelque chose que tout le monde peut comprendre, utilisons une métaphore familière.
Qui gagnerait dans un combat?
Quand tu étais enfant, le monde était beaucoup plus frais. Si vous aviez eu la possibilité de poser une seule et unique question à une entité connaissant tout, vous n’auriez pas réfléchi au sens de la vie ni posé la question de savoir si la paix dans le monde est réalisable ou non, une seule chose importerait. Si Batman et Spiderman se disputaient, qui gagnerait?
ScrewAttack écrit d'énormes pièces destinées à dresser les héros les uns contre les autres.
Il y a cette curiosité innée chez les enfants à comparer constamment les choses et à demander ce qui est le meilleur. En vieillissant, les nuances de gris remplacent le noir et le blanc et nous perdons cette tendance (les nerds sont bien sûr une exception). Pour comprendre la spécificité CSS, vous devez revenir à l’enfance. Quand on vous donne deux sélecteurs similaires, demandez-vous toujours: "Qui gagnerait dans un combat?" La réponse pourrait s'avérer essentielle pour votre code.
Pour voir comment cela fonctionne, opposons quelques sélecteurs et voyons ce qui se passe.
Et le dernier sera le premier
Pour notre première bataille, opposons deux sélecteurs essentiellement identiques. Comment savons-nous quel sélecteur gagnerait?
Parlez de la guerre de classe. Puns côté, imaginez que nous avions la configuration suivante sur notre page Web:
Ici, nous avons un match égal. Les deux classes sont appliquées à la même division, sans autres complexités pour falsifier l'exemple. Laissons-les se battre et voir qui gagne?
La boîte est rouge! Cela signifie que la? .Box? la classe a gagné. Mais pourquoi? Vous connaissez probablement déjà la réponse, non? C'est venu en dernier. Basculez les sélecteurs et nous constatons le résultat opposé:
Ici le carré est bleu car le? .Blue? La classe est venue en dernier, remplaçant la?? classe.
La classe ne change pas qui vous êtes
Cette dernière bataille n'était pas très intéressante. Les adversaires étaient également à égalité et le résultat était évident. Nous n'avons même pas encore abordé la question de la spécificité. Néanmoins, c’était une base nécessaire qui devait être posée.
Nous allons maintenant plonger dans une bataille un peu plus juteuse: ID vs. Class.
Notre configuration ici est assez similaire à la dernière fois, à la place de deux classes, nous aurons une classe et un ID:
Étant donné la règle que nous avons apprise la dernière fois, vous pourriez prédire que la classe gagnerait dans ce scénario. Voyons si cela s'avère vrai.
Une contrariété! Même si la classe est venue après l'ID, elle a tout de même perdu. Cela indique que les ID sont en quelque sorte plus puissants que les classes dans la bataille de la spécificité.
Pseudo Death Match
Avant d’intervenir pour voir comment tout cela fonctionne, examinons un dernier exemple. Nous allons augmenter la complexité ici afin que vous puissiez commencer à comprendre comment cette connaissance peut être appliquée dans une situation réelle.
Oh snap! Je parierai que celui-ci attrape même certains des lecteurs expérimentés. Beaucoup d'entre nous ne connaissent même pas la différence entre les deux, et encore moins lequel remporte un match à mort avec spécificité. Que la fête commence.
Qu'est-ce que ça va être? Le h2 sera-t-il rouge ou bleu? Découvrons-le:
Le pseudo élément le prend! La pseudo-classe n'avait aucune chance. Mais pourquoi? Qu'est-ce qui se passe dans les coulisses du vaudou ici? Comment pouvons-nous être sûr du résultat avant même de l'essayer?
Règles de spécificité
Les essais et les erreurs sont un excellent moyen d’apprendre, mais au bout du compte, il existe trop de scénarios différents possibles pour recueillir toutes les informations que nous devrions connaître. Ce dont nous avons besoin, c’est d’un moyen rigoureux de choisir les sélecteurs auxquels le navigateur accorde plus d’importance et pourquoi.
En fait, il existe en fait des règles simples qui régissent la spécificité. En fait, il existe même un système de points pratique:
Un sélecteur de CSS donné peut avoir un nombre quelconque de pièces de ce puzzle. L'astuce pour déterminer la spécificité est de les additionner. Celui avec le score le plus élevé gagne. C'est si simple.
Cependant, personne n’aime les mathématiques. Pour tester la spécificité d’un sélecteur, nous pouvons utiliser l’impressionnant calculateur de spécificité de Keegan Street.
Avec cet outil génial, nous pouvons taper deux sélecteurs et un score pour chacun sera automatiquement calculé. Le premier sélecteur de l'exemple contient une classe, une pseudo-classe et deux éléments (score: 0,0,2,2). Le second sélecteur le bat haut la main avec un identifiant, une classe, une pseudo classe et un élément (score: 0,1,2,1).
Comme vous pouvez le constater, la règle est que le sélecteur présentant le degré de spécificité le plus élevé l'emporte.En d'autres termes, des sélecteurs plus spécifiques ont priorité sur les sélecteurs moins spécifiques.
Étant donné notre exemple précédent de classe par rapport à un identifiant, nous pouvons voir pourquoi cet identifiant gagne. Sa spécificité est de loin supérieure à celle de la classe, elle remplace donc la classe.
Règles spéciales
Avec le calculateur de spécificité, nous pouvons comprendre la plupart des scénarios, mais nous devons garder à l’esprit quelques problèmes de courbes.
- Le sélecteur universel (*) vaut 0
- Lorsque deux sélecteurs ont la même spécificité, le dernier gagne
- Les éléments ne peuvent jamais battre un sélecteur de classe, même si vous les empilez
- ! important est Superman, il peut battre presque tout
Le dernier ici est le plus intéressant, prenons donc un exemple. Voici quelques éléments HTML et CSS à prendre en compte:
Assez simple, non? En utilisant notre système de points, la classe obtient des scores plus élevés que l'élément, ainsi le titre sortira. rouge. Mais que se passe-t-il si nous jetons Superman dans le scénario?
Maintenant, nous avons truqué le combat. Dans ce cas, le titre sort réellement bleu! La règle "important" dit, "vous vissez la spécificité". et fait ce qu'il veut.
Moins est plus
Maintenant que vous avez compris la spécificité, vous serez en mesure de manipuler votre CSS pour faire beaucoup de choses folles. Rappelez-vous qu’un grand pouvoir entraîne de grandes responsabilités.
En CSS, la règle générale est que moins est plus. Plus vos règles sont courtes, mieux c'est. Ne jamais utiliser .list ul> li> a quand li a fonctionnera très bien. Les sélecteurs plus courts sont plus efficaces et plus faciles à lire. Parfois, il faut être chic, mais il faut que ce soit l'exception, pas la règle.
Un casse-tête à résoudre
Attendez une seconde. Les règles étaient censées expliquer les résultats que nous avions obtenus lors de nos tests initiaux, n'est-ce pas? Alors qu'en est-il de celui-ci?
Pour autant que je comprenne les règles, une pseudo-classe bat un pseudo-élément, alors pourquoi le pseudo-élément gagne-t-il ici? Peut-être que nous nous trompons sur le pseudo-élément, vérifions notre graphique.
Nan. Nous avions raison de dire que le premier enfant est la pseudo-classe par rapport à la première ligne, le pseudo-élément. Peut-être que nous calculons mal? Consultons la calculatrice:
En ce qui concerne la calculatrice, le titre devrait être en bleu, car le premier enfant bat la première ligne. Mais ce n'est pas comme ça que ça marche dans le navigateur. Ce qui donne? Peut-être que notre calculatrice est en panne, essayons-en une autre.
Selon celui-ci également, le premier enfant devrait avoir une valeur de spécificité plus élevée et devrait donc gagner? mais ce n'est pas le cas. J'ai essayé d'utiliser la syntaxe à deux points, en inversant l'ordre. rien ne fonctionne. Le pseudo élément gagne toujours, peu importe ce que je lui lance.
C’est là que ça devient vraiment dingue, même si je jette un élément de style en ligne, qui devrait battre presque tout, le truc le plus beau reste rouge!
Conceptuellement, cela fait presque sens. Notre pseudo-classe cible l'élément h2 entier, tandis que notre pseudo-élément ne cible que la première ligne de cet élément, ce qui semble plus spécifique.
Votre explication ici
Pour être franc, je suis un peu dérouté ici. Pour la plupart, la spécificité est assez simple, mais je n'arrive pas à comprendre ce que je pense. Mon instinct est que c'est peut-être une sorte de question d'héritage, mais je ne suis pas sûr. Cela pourrait aussi être quelque chose de similaire à :ne pas() ce qui a une importance particulière en ce qui concerne la spécificité (seuls les éléments entre parenthèses comptent, en soi, il s'agit d'un zéro).
En réponse à notre petit casse-tête, voici quelques réponses utiles de nos lecteurs!
Tim Pietrusky
Selon la spécification, seul un autre élément enveloppant le contenu de la première ligne est plus spécifique que le pseudo-élément de première ligne. - Démo CodePen
Thomas
? Pensez à la première ligne en tant qu'élément supplémentaire (comme span) à l'intérieur du titre, englobant uniquement la première ligne, ainsi sa cible est un élément à l'intérieur du h2, comme
première ligne deuxième ligne
La couleur de fond du h2 ne sera utilisée (héritée) que si aucune valeur n'est déclarée pour :: first-line?
Lectures complémentaires
Beaucoup d'excellents articles ont déjà été publiés sur la spécificité, en voici quelques-uns:
- Spécificité CSS: Ce que vous devez savoir - Smashing Magazine
- Spécificités sur la spécificité CSS - Astuces CSS
- Spécificité CSS pour les joueurs de poker - Je suis un appareil photo
- Comprendre la spécificité CSS - Jonathan Snook
- Le pouvoir de la spécificité CSS - Thèmes de bricolage
Conclusion
Comme nous venons de le voir, la spécificité CSS est super simple, sauf quand c'est super complexe? Vous pouvez et devez apprendre les bases pour éviter tout résultat inattendu. Toutefois, si vous rencontrez une situation délicate, vous aurez peut-être besoin de quelques essais et erreurs de mode.
Qu'est-ce que tu penses? Comprenez-vous la spécificité autant que vous le devriez? Pouvez-vous expliquer le scénario déroutant que nous avons rencontré ci-dessus?