Spezifikation der Regeln

Da Sie nur eine einzelne Klasse für alles verwenden, was Sie schreiben, betr?gt die Spezifit?t jedes Selektors 0,1,0

Bem ist nicht die Antwort

Es gibt unz?hlige Erfolgsgeschichten über die Verwendung von BEMs Front-End-Architektur. Trotz seiner Popularit?t ist BEM nicht für bestimmte Arten von Projekten geeignet. Es scheint perfekt für Front-End-Entwickler zu sein, das einzige Projekt zu sein, das HTML schreibt. Wenn Sie jedoch Inhalte für ein CMS für mindestens einen Teil des Content -Editors schreiben, ist BEM stark eingeschr?nkt. Die reine Form von BEM erlaubt keine Verhinderungs- und Typ -Selektoren, wie .Section--dark > a (z. B. um sie leichter zu machen), sondern erfordert stattdessen, eine Klasse für das Anker -Tag zu erfinden. Dies führt zu einem Problem - der Inhaltseditor fügt den Standard -Link über die grafische Schnittstelle ein, wodurch der Link nahezu unsichtbar ist. Dies kann auch für alle Abs?tze, Listen oder Bilder in einem bestimmten Abschnitt gelten. Manchmal ist es notwendig, reine HTML -Inhalte ohne Klassen schreiben zu k?nnen. In diesem Fall besteht die L?sung darin, dass das übergeordnete Styling mit einem Nachkommensw?hler sie stylen. Diese Verwendung von Kaskaden erm?glicht die Kontextflexibilit?t - es hat einen benutzerdefinierten Stil, wenn sich etwas in einem anderen Kontext befindet. Wir brauchen also eine praktische L?sung für Situationen, in denen wir keine reine BEM verwenden k?nnen, was weit verbreitet ist. CSS -Pr?prozessoren k?nnen uns hier helfen, und alle drei beliebten Pr?prozessoren - weniger, Sass und Stylus - k?nnen unsere Arbeit vereinfachen, wenn wir den Selektor mit einem spezifischeren Selektor überschreiben müssen.

Methode 1 - Verwenden Sie den Selektor, um Pr?fix

Wenn Sie auf Spezifit?tsprobleme sto?en und einen Selektor schwerer machen m?chten, k?nnen Sie vor einem vorhandenen Selektor eine Klasse, Attribut, ID oder eingeben. Auf diese Weise k?nnen Sie die Spezifit?t leicht erh?hen. Obwohl diese Funktion haupts?chlich zum Lokalisieren des IE mit dem bedingten HTML -Tag verwendet wird, verfügt sie über mehr Funktionen. Die übergeordnete Referenzauswahl (&) in CSS -Pr?prozessor erm?glicht es uns, das Selektorpr?fix einfach hinzuzufügen, damit wir Folgendes machen k?nnen:

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

CSS erstellt:

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

M?glicherweise m?chten Sie das HTML- oder Body -Tag zum Pr?fix verwenden. Sie k?nnen jedoch auch einige spezifischere Inhalte verwenden, die auf der Seite vorhanden sind, z. B. .page, #wrapper, html[lang] usw. Mit SASS k?nnen Sie vorangestellte Selektoren in Variablen platzieren, wenn ?nderungen in Zukunft auftreten.

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

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

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

), ihn nicht mehr überschreiben, es sei denn, Sie erfinden einen neuen, schwereren Selektor, und dies ist nicht immer m?glich. #wrapper

Methode 2-Selbstschalter-Selektor

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

Endgültige Gedanken

Der n?chste natürliche Schritt beim Umgang mit Spezifit?tsproblemen in unserem intelligenteren CSS als je zuvor besteht darin, eine M?glichkeit zu erstellen, widersprüchliche Aussagen zu identifizieren und so etwas wie das SASS -Mixin von David Khourshid für jede Entit?tspezifit?t zu verwenden, und verwenden Sie dann automatisch eine der oben genannten Methoden, um sich zu verbessern Spezifit?t. Vielleicht bin ich zu optimistisch über meinen Traum von selbstbewussten Stylesheets, aber ich denke, die komplexe Logik in unserem Code wird zunehmen, wenn sich CSS-Pr?prozessoren entwickeln. Welche der oben genannten Methoden werden Sie beim n?chsten Mal anwenden, wenn Sie sich mit Spezifit?tsproblemen befassen? Welche anderen Strategien verwenden Sie, um Ihre Spezifit?tsprobleme zu l?sen?

FAQs über CSS -Pr?prozessor und Selektorspezifit?t

Was ist die Selektorspezifit?t im CSS -Pr?prozessor?

Selektorspezifit?t ist ein Konzept in CSS, das feststellt, welche Stile auf Elemente angewendet werden, wenn widersprüchliche Regeln vorhanden sind. Es handelt sich um ein Gewichtssystem, das verschiedenen Typ -Selektoren zugeordnet ist (z. B. IDs, Klassen und Typ -Selektoren). In CSS -Pr?prozessoren wie Sass oder weniger bleibt dieses Konzept gleich. Diese Pr?prozessoren liefern jedoch zus?tzliche Funktionen wie Verachtung, die die Spezifit?t des Selektors beeinflusst.

Wie wirkt sich die Verschachtelung auf die Selektorspezifit?t in CSS -Pr?prozessoren aus?

Nesting ist eine Funktion im CSS -Pr?prozessor, mit der Sie mehr organisierte und leichter zu lesen k?nnen. Es erh?ht jedoch auch die Selektorspezifit?t. Jede Niststufe fügt Spezifit?t hinzu und macht den verschachtelten Selektor spezifischer als der übergeordnete Selektor. Dies ist nützlich, um Stile zu überschreiben, kann aber auch zu unerwarteten Konsequenzen führen, wenn sie nicht ordnungsgem?? verwaltet werden.

Wie berechnet Sie die Spezifit?t von Selektoren in CSS -Pr?prozessoren?

Die Spezifit?t des Selektors wird basierend auf dem verwendeten Selektortyp berechnet. Im Allgemeinen sind ID -Selektoren am spezifischsten, gefolgt von Klassenauswahlern, und dann die Selektoren Typ. Jede Art von Selektor wird unterschiedliche Gewichte zugewiesen, und die Gesamtspezifit?t ist die Summe dieser Gewichte. Einige CSS -Pr?prozessoren wie SASS bieten Funktionen zur Berechnung der Selektorspezifit?t.

Was bedeutet "&" in CSS -Stilen in Pr?prozessoren wie Sass?

Das Symbol "&" wird in CSS -Pr?prozessoren wie SASS verwendet, um den übergeordneten Selektor in verschachtelten Regeln zu verweisen. Dies ist nützlich, um spezifischere Selektoren zu erstellen oder Stile auf verschiedene Zust?nde eines Elements anzuwenden, wie z. B. Schwebedauer oder aktive Zust?nde.

Wie kann man einen Dual -Selektor in SASS verwenden, um bestimmte Gewichte zu erh?hen?

In Sass k?nnen Sie seine Spezifit?t verbessern, indem Sie den Selektor kopieren. Dies wird als Link oder Doppelauswahl bezeichnet. Beispielsweise wird die Spezifit?t von .class.class h?her als .class. Diese Methode sollte jedoch mit Vorsicht angewendet werden, da Ihr CSS schwieriger zu halten und zu überschreiben wird.

Was sind die potenziellen Probleme mit einer hohen Spezifit?t bei CSS -Pr?fokessoren?

hohe Spezifit?t macht es schwieriger, Ihr CSS zu pflegen und zu decken. Es kann zu sogenannten Spezifit?tskonflikten führen, und Sie müssen die Spezifit?t des Selektors st?ndig verbessern, um den vorherigen Stil abzudecken. Dies kann dazu führen, dass CSS anschwillt und komplex ist.

Wie man die Spezifit?t in CSS -Pr?prozessoren verwaltet?

Es gibt mehrere Strategien, um die Spezifit?t in CSS -Pr?prozessoren zu verwalten. Eine davon besteht, dass Selektoren mit niedriger Spezifit?t so weit wie m?glich verwendet werden. Eine andere besteht darin, unn?tige Verschachtelung zu vermeiden, da dies die Spezifit?t erh?ht. Sie k?nnen auch die Methode BEM (Block, Element, Modifikator) verwenden, um die Spezifit?t niedrig und konsistent zu halten.

Kann ich verwenden! Wichtig, um die Spezifit?t im CSS -Pr?prozessor zu überschreiben?

Ja, Sie k?nnen die !important -Regel verwenden, um die Spezifit?t im CSS -Pr?prozessor zu überschreiben. Dies sollte jedoch ein letzter Ausweg sein, da es Ihr CSS schwieriger macht und zu bestimmten Konflikten führen kann.

Wie wirkt sich die Reihenfolge der Selektoren auf die Spezifit?t in CSS -Pr?prozessoren aus?

Die Reihenfolge der Selektoren beeinflusst die Spezifit?t im CSS -Pr?prozessor. Wenn die Spezifit?t der beiden Selektoren gleich ist, wird der letzte Selektor, der im CSS angezeigt wird, angewendet. Dies wird als Quellenreihenspezifit?t bezeichnet.

Kann ich Inline -Stile verwenden, um die Spezifit?t im CSS -Pr?prozessor zu überschreiben?

Ja, Inline -Stile haben die h?chste Spezifit?t in CSS und k?nnen andere Stile überschreiben. Verwenden Sie sie jedoch mit Vorsicht, da sie Ihr CSS schwieriger zu bewahren k?nnen und zu inkonsistenten Stilen führen k?nnen.