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>

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

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

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

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

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.