Spécificité du sélecteur avec les préprocesseurs CSS

Points clés

• La spécificité du sélecteur est un problème récurrent dans les projets moyens et grands qui nécessitent une gestion et une compréhension minutieuses. Des outils tels que la calculatrice interactive et le mixin SASS peuvent aider à comprendre et à gérer la spécificité.
La méthode
• bem (bloc, élément, modificateur) est un outil puissant pour maintenir une spécificité cohérente. En utilisant des noms de classe pour chaque élément stylé, la spécificité de chaque sélecteur reste la même, éliminant le problème des sélecteurs trop spécifiques. Cependant, BEM peut ne pas convenir à tous les types de projets, en particulier ceux que les non-développeurs peuvent avoir besoin d'écrire HTML partiel.
• Les préprocesseurs CSS tels que moins, SASS et Stylus fournissent des solutions à des problèmes spécifiques. Une façon consiste à ajouter un sélecteur existant avec une classe, un attribut, un ID ou un sélecteur de type pour améliorer sa spécificité. Cette méthode a des limites car une fois le sélecteur le plus lourd utilisé, il ne peut être écrasé à moins qu'un nouveau sélecteur plus lourd soit créé.
• Une autre approche est le sélecteur d'auto-chaîne, qui fonctionne avec les sélecteurs ID, classe et attribut. Cette méthode fournit un moyen presque infiniment évolutif de remplacer n'importe quel sélecteur, mais ne fonctionne pas avec des sélecteurs de type. En utilisant le sélecteur de référence parent, le même sélecteur peut être lié à lui-même plusieurs fois, augmentant chaque fois sa spécificité.

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.

Spécification des règles

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

bem n'est pas la réponse

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 .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.

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:

<code>.class {
  body & {
    foo: bar;
  }
}</code>

Création CSS:

<code>.class {
  body & {
    foo: bar;
  }
}</code>

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 .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>

Cela générera:

<code>$prepend1: "html &";
$prepend2: "#wrapper &";

.selector {
  #{$prepend1} {
    background: #cacaca;
  }
  #{$prepend2} {
    background: #fefefe;
  }
}</code>

D'autres préprocesseurs populaires tels que moins et stylet offrent également cette fonctionnalité.

Spécification des règles

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

), vous ne pouvez plus le remplacer à moins d'inventer un nouveau sélecteur plus lourd, et ce n'est pas toujours possible. #wrapper

Méthode 2 - sélecteur d'auto-chaîne

L'ajout de préfixe de sélecteur est utile, mais ce n'est pas une solution infiniment évolutive - vous ne pouvez avoir que des moyens limités de localiser le parent. De plus, une fois que vous avez préfixé plusieurs sélecteurs avec l'option la plus lourde de votre code, vous limiterez les options pour résoudre les problèmes de spécificité ultérieurement (surtout si vous utilisez l'ID). La communauté frontale s'est récemment rappelée d'une fonctionnalité CSS très utile - des sélecteurs d'auto-chaîne pour améliorer leur spécificité. Les sélecteurs d'auto-chaîne conviennent aux sélecteurs d'identification, de classe et d'attribut, mais pas pour les sélecteurs de type. Cependant, si vous utilisez principalement des classes pour styliser le contenu, le sélecteur d'auto-chaîne vous fournit un moyen infiniment évolutif de remplacer tout sélecteur. Avec le sélecteur de référence parent, vous pouvez facilement lier le même sélecteur à lui-même plusieurs fois (cela s'applique aux sélecteurs d'identification, de classe et d'attribut, mais pas aux sélecteurs de type). Cependant, vous devez insérer chacun et après le premier, l'exigence minimum est Sass 3.4:

<code>html .selector {
  background: #cacaca;
}
#wrapper .selector {
  background: #fefefe;
}</code>

<code>.selector {
  {&} {
    background: #cacaca;
  }
  {&}{&} {
    background: #fefefe;
  }
}</code>

De même, vous pouvez le faire en utilisant moins et stylet. Si cela est trop moche à votre goût, vous pouvez toujours créer un mélange qui améliore itérativement la spécificité de tout sélecteur unique. Ce mélange utilise certaines fonctionnalités avancées et nécessite également Sass 3.4:

<code>.selector.selector {
  background: #cacaca;
}
.selector.selector.selector {
  background: #fefefe;
}</code>

Création CSS:

<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>

Vous pouvez créer le même mixin dans Stylus, malheureusement, il n'y a pas de moyen facile de créer un tel mélange en moins.

Spécification des règles

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.

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

Quelle est la spécificité du sélecteur dans le préprocesseur CSS?

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.

Comment la nidification affecte-t-elle la spécificité du sélecteur dans les préprocesseurs CSS?

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.

Comment calculer la spécificité des sélecteurs dans les préprocesseurs CSS?

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.

Que signifie "&" dans les styles CSS dans des préprocesseurs tels que SASS?

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.

Comment utiliser un double sélecteur dans SASS pour augmenter les poids spécifiques?

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 .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?

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.

Comment gérer la spécificité des préprocesseurs 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.

Puis-je utiliser! Important pour remplacer la spécificité dans le préprocesseur CSS?

Oui, vous pouvez utiliser la règle !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?

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.

Puis-je utiliser des styles en ligne pour remplacer la spécificité dans le préprocesseur CSS?

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.

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!