Points clés
La spécificité du sélecteur est un vrai problème pour la plupart des projets moyens et grands, et comme tout autre problème de codage fréquemment répété, il doit être géré attentivement. Même CSS-Tricks a un article récent sur la façon de maintenir la spécificité CSS faible. Avant d'essayer d'utiliser !important, permettez-moi de vous rappeler: & gt; —— Tony Nelson (@ Tonynelson19) 18 novembre 2010 !important
La spécificité !important CSS n'est pas compliquée, mais la communauté a fait beaucoup de travail pour le rendre aussi facile à comprendre que possible, en écrivant des guides en utilisant des analogies pour pêcher et Star Wars ou en utilisant des termes de poker. Il existe des calculatrices interactives disponibles en ligne, et même le mixin spécifique de SASS, qui vous permet de vérifier et de sortir les valeurs de spécificité exactes du sélecteur. Dans les stratégies spécifiques au CSS, plus la solution spécifique de CSS est plus simple, la solution spécifique de cet article (qui peut sembler un peu maladroite) convient aux situations où l'architecture ne permet pas de simples correctifs. Lorsque vous décidez quelle approche est la meilleure pour votre projet, appliquez votre jugement et essayez finalement de trouver l'équilibre parfait entre un CSS propre et facile à maintenir.
Méthode 0 - bem
BEM n'est pas seulement une convention de dénomination, c'est une boîte à outils frontale inventée par Yandex, avec l'idée d'être plus proche de la programmation orientée objet. En pratique, cela signifie utiliser le nom de classe pour tout ce que vous voulez styliser. Bien que «ne pas envelopper dans une feuille de style en cascade» peut sembler ridicule pour certains, évitez d'utiliser des sélecteurs de type lors de la création de modules qui devraient être faciles à maintenir, portables, autosuffisants, faciles à modifier et extensibles et l'idée d'éviter la nidification est très utile. Cependant, l'un des principaux avantages de la méthode BEM est qu'il conserve la spécificité de chaque sélecteur inchangé, il n'y a donc presque aucun problème causé par des sélecteurs trop spécifiques, c'est pourquoi cette méthode est la méthode n ° 0 - si vous l'adoptez , vous éliminez en fait tout problème futur avec la spécificité du sélecteur dans votre projet. Puisque vous n'utiliserez qu'une seule classe pour tout ce que vous écrivez, la spécificité de chaque sélecteur sera 0,1,0 Il existe d'innombrables histoires de réussite sur l'utilisation de l'architecture frontale de BEM, cependant, malgré sa popularité, BEM ne convient pas à des types spécifiques de projets. Il semble être parfait pour les développeurs frontaux d'être le seul projet à écrire HTML. Cependant, si vous écrivez du contenu pour un CMS pendant au moins une partie de l'éditeur de contenu, BEM sera gravement restreint. La forme pure de BEM ne permet pas aux sélecteurs de nidification et de type, tels que Méthode 1 - Utilisez le sélecteur pour ajouter le préfixe Lorsque vous rencontrez des problèmes de spécificité et que vous souhaitez rendre un sélecteur plus lourd, vous pouvez ajouter un sélecteur de classe, d'attribut, d'identification ou de type avant un sélecteur existant. De cette façon, vous pouvez légèrement augmenter la spécificité. Bien que cette fonctionnalité soit principalement utilisée pour localiser IE en utilisant la balise HTML conditionnelle, il a plus de fonctionnalités à développer. Le sélecteur de référence parent (&) dans le préprocesseur CSS nous permet d'ajouter facilement le préfixe de sélecteur pour le rendre plus lourd, afin que nous puissions faire ce qui suit: Création CSS: Vous voudrez peut-être utiliser le HTML ou la balise corporelle pour préfixer, mais vous pouvez également utiliser un contenu plus spécifique qui existe sur la page, comme
), vous ne pouvez plus le remplacer à moins d'inventer un nouveau sélecteur plus lourd, et ce n'est pas toujours possible. Méthode 2 - sélecteur d'auto-chaîne
Réflexions finales La prochaine étape naturelle dans le traitement des problèmes de spécificité dans notre CSS plus intelligent est de créer un moyen d'identifier les déclarations contradictoires, en utilisant quelque chose comme le mixin Sass de David Khourshid pour chaque spécificité d'entité, puis utilisez automatiquement l'une des méthodes ci-dessus pour améliorer l'amélioration spécificité. Peut-être que je suis trop optimiste quant à mon rêve de feuilles de style conscient de soi, mais je pense que la logique complexe de notre code augmentera à mesure que les préprocesseurs CSS se développent. Laquelle des méthodes ci-dessus utiliserez-vous la prochaine fois que vous devrez faire face aux problèmes de spécificité? Quelles autres stratégies utilisez-vous pour résoudre vos problèmes de spécificité? FAQ sur le préprocesseur CSS et la spécificité du sélecteur La spécificité du sélecteur est un concept de CSS qui détermine quels styles sont appliqués aux éléments lorsqu'ils existent des règles contradictoires. Il s'agit d'un système de poids attribué à différents sélecteurs de type (tels que des ID, des classes et des sélecteurs de type). Dans les préprocesseurs CSS tels que SASS ou moins, ce concept reste le même. Cependant, ces préprocesseurs offrent des fonctionnalités supplémentaires telles que la nidification, ce qui affecte la spécificité du sélecteur. Le nidification est une fonctionnalité du préprocesseur CSS qui vous permet d'écrire du code plus organisé et plus facile à lire. Cependant, il augmente également la spécificité du sélecteur. Chaque niveau de nidification ajoute une spécificité, ce qui rend le sélecteur imbriqué plus spécifique que le sélecteur parent. Ceci est utile pour l'écrasement des styles, mais peut également entraîner des conséquences inattendues si elle n'est pas gérée correctement. La spécificité du sélecteur est calculée en fonction du type de sélecteur utilisé. Généralement, les sélecteurs d'ID sont les plus spécifiques, suivis par des sélecteurs de classe, puis des sélecteurs de type. Chaque type de sélecteur se voit attribuer des poids différents, et la spécificité totale est la somme de ces poids. Certains préprocesseurs CSS, tels que SASS, fournissent des fonctions pour calculer la spécificité du sélecteur. Le symbole "&" est utilisé dans les préprocesseurs CSS tels que SASS pour référencer le sélecteur parent dans les règles imbriquées. Ceci est utile pour créer des sélecteurs plus spécifiques ou appliquer des styles à différents états d'un élément, tels que Hover ou States actifs. Dans SASS, vous pouvez améliorer sa spécificité en copiant le sélecteur. C'est ce qu'on appelle un lien ou un double sélecteur. Par exemple, la spécificité de Une spécificité élevée rendra votre CSS plus difficile à maintenir et à couvrir. Cela peut conduire à des conflits dits de spécificité, et vous devez constamment améliorer la spécificité du sélecteur pour couvrir le style précédent. Cela peut faire gonfler et complexe CSS. Il existe plusieurs stratégies pour gérer la spécificité des préprocesseurs CSS. L'une consiste à utiliser autant que possible les sélecteurs de spécificité. Une autre consiste à éviter la nidification inutile, car cela augmente la spécificité. Vous pouvez également utiliser la méthode BEM (bloc, élément, modificateur) pour maintenir la spécificité faible et cohérente. Oui, vous pouvez utiliser la règle L'ordre des sélecteurs affecte la spécificité du préprocesseur CSS. Si la spécificité des deux sélecteurs est la même, le dernier sélecteur qui apparaît dans le CSS sera appliqué. C'est ce qu'on appelle la spécificité de l'ordre source. Oui, les styles en ligne ont la spécificité la plus élevée en CSS et peuvent remplacer d'autres styles. Cependant, utilisez-les avec prudence, car ils peuvent rendre votre CSS plus difficile à maintenir et entraîner des styles incohérents. Spécification des règles
bem n'est pas la réponse
.Section--dark > a (par exemple, de le rendre plus léger), mais vous oblige plutôt à inventer une classe pour la balise d'ancrage. Cela conduit à un problème - l'éditeur de contenu insérera le lien par défaut via l'interface graphique, ce qui peut rendre le lien presque invisible. Cela peut également s'appliquer à tous les paragraphes, listes ou images dans une section spécifique. Parfois, il est nécessaire de pouvoir écrire du contenu HTML pur sans classes, auquel cas la solution est de le faire coiffer avec un sélecteur descendant. Cette utilisation de la cascade permet la flexibilité du contexte - elle a un style personnalisé lorsque quelque chose est dans un contexte différent. Nous avons donc besoin d'une solution pratique pour des situations où nous ne pouvons pas utiliser le BEM pur, ce qui est assez courant. Les préprocesseurs CSS peuvent nous aider ici, et les 3 préprocesseurs populaires - moins, SASS et stylet - sont capables de simplifier notre travail lorsque nous devons remplacer le sélecteur avec un sélecteur plus spécifique. <code>.class {
body & {
foo: bar;
}
}</code><code>.class {
body & {
foo: bar;
}
}</code>.page, #wrapper, html[lang], etc. Sass vous permet de placer des sélecteurs préfixés en variables lorsque des changements se produisent à l'avenir.
<code>body .class {
foo: bar;
}</code><code>$prepend1: "html &";
$prepend2: "#wrapper &";
.selector {
#{$prepend1} {
background: #cacaca;
}
#{$prepend2} {
background: #fefefe;
}
}</code>
Ajout de préfixes Notre sélecteur de classe d'origine 0,1,0 avec le sélecteur de type entraînera 0,1,1, et les préfixes avec ID - 1,1,0. L'inconvénient ici est qu'une fois que vous avez ajouté un préfixe de sélecteur avec le sélecteur le plus lourd de votre code (c'est-à-dire #wrapper
<code>html .selector {
background: #cacaca;
}
#wrapper .selector {
background: #fefefe;
}</code><code>.selector {
{&} {
background: #cacaca;
}
{&}{&} {
background: #fefefe;
}
}</code><code>.selector.selector {
background: #cacaca;
}
.selector.selector.selector {
background: #fefefe;
}</code><code>@mixin specificity($num: 1) {
$selector: &;
@if $num > 1 {
@for $i from 1 to $num {
$selector: $selector + &;
}
@at-root #{$selector} {
@content;
}
} @else {
@content;
}
}
.selector {
@include specificity(2) {
background: #cacaca;
}
@include specificity(3) {
background: #fefefe;
}
}</code>
L'auto-chaîne augmente la spécificité du sélecteur de 0,1,0 à 0,2,0, etc., ce qui le rend presque infiniment évolutif. Quelle est la spécificité du sélecteur dans le préprocesseur CSS?
Comment la nidification affecte-t-elle la spécificité du sélecteur dans les préprocesseurs CSS?
Comment calculer la spécificité des sélecteurs dans les préprocesseurs CSS?
Que signifie "&" dans les styles CSS dans des préprocesseurs tels que SASS?
Comment utiliser un double sélecteur dans SASS pour augmenter les poids spécifiques?
.class.class sera supérieure à .class. Cependant, cette méthode doit être utilisée avec prudence, car elle rendra votre CSS plus difficile à maintenir et à écraser. Quels sont les problèmes potentiels avec une spécificité élevée dans les préprocesseurs CSS?
Comment gérer la spécificité des préprocesseurs CSS?
Puis-je utiliser! Important pour remplacer la spécificité dans le préprocesseur CSS?
!important pour remplacer la spécificité dans le préprocesseur CSS. Cependant, cela devrait être un dernier recours, car cela rendra votre CSS plus difficile à entretenir et peut entraîner des conflits spécifiques. Comment l'ordre des sélecteurs affecte-t-il la spécificité des préprocesseurs CSS?
Puis-je utiliser des styles en ligne pour remplacer la spécificité dans le préprocesseur CSS?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
