Selektorspezifität mit CSS -Präprozessoren

Schlüsselpunkte

• Selektorspezifität ist ein wiederkehrendes Problem bei mittleren und großen Projekten, die sorgfältiges Management und Verständnis erfordern. Tools wie interaktiver Taschenrechner und Sass 'Mixin können dazu beitragen, die Spezifität zu verstehen und zu verwalten.
• BEM -Methode (Block, Element, Modifikator) ist ein leistungsstarkes Werkzeug zur Aufrechterhaltung einer konsistenten Spezifität. Durch die Verwendung von Klassennamen für jedes Stilelement bleibt die Spezifität jedes Selektors gleich, wodurch das Problem der übermäßig spezifischen Selektoren beseitigt wird. BEM ist jedoch möglicherweise nicht für alle Arten von Projekten geeignet, insbesondere für diejenigen, die Nichtentwickler möglicherweise teilweise HTML schreiben müssen.
• CSS -Präprozessoren wie weniger, Sass und Stift bieten Lösungen für spezifische Probleme. Eine Möglichkeit besteht darin, einen vorhandenen Selektor mit einer Klasse, einem Attribut, einer ID oder einem Typ -Selektor hinzuzufügen, um seine Spezifität zu verbessern. Diese Methode hat Einschränkungen, da der schwerste Selektor nicht überschrieben werden kann, wenn ein neuer, schwererer Selektor erstellt wird.
• Ein anderer Ansatz ist der Selbstschalter-Selektor, der mit ID-, Klasse- und Attribut-Selektoren funktioniert. Diese Methode bietet eine nahezu unendlich skalierbare Möglichkeit, jeden Selektor zu überschreiben, funktioniert jedoch nicht mit Typ -Selektoren. Durch die Verwendung des übergeordneten Referenzauswählers kann derselbe Selektor mehrmals mit sich selbst verknüpft werden, wobei jedes Mal seine Spezifität erhöht wird.

Selektorspezifität ist für die meisten mittel- und großen Projekte ein echtes Problem. Wie alle anderen häufig wiederholten Codierungsprobleme muss sie sorgfältig behandelt werden. Sogar CSS-Tricks hat einen aktuellen Artikel darüber, wie die CSS-Spezifität niedrig bleibt. Bevor Sie versuchen, !important zu verwenden, lassen Sie mich Sie erinnern: & GT; - Tony Nelson (@Tononynelson19) 18. November 2010 !important !important CSS -Spezifität ist nicht kompliziert, aber die Community hat viel Arbeit geleistet, um es so leicht wie möglich zu verstehen und Guides zu schreiben, indem Analogien zum Fisch und Star Wars verwendet werden oder Pokerbegriffe verwendet werden. Es stehen interaktive Taschenrechner online und sogar das spezifische Mixin von Sass zur Verfügung, mit dem Sie die genauen Spezifitätswerte des Selektors überprüfen und ausgeben können. In CSS-spezifischen Strategien ist die spezifische Lösung in diesem Artikel (die sich möglicherweise etwas ungeschickt anfühlt) für Situationen geeignet, in denen die Architektur keine einfachen Korrekturen zulässt. Bei der Entscheidung, welcher Ansatz für Ihr Projekt am besten geeignet ist, wenden Sie Ihr Urteilsvermögen an und versuchen Sie letztendlich, die perfekte Balance zwischen einem sauberen und leicht zu machtenden CSS zu erreichen.

Methode 0 - Bem

Bem ist nicht nur eine Namenskonvention, sondern auch ein von Yandex erfundenes Front-End-Toolkit, das sich der objektorientierten Programmierung näher nähert. In der Praxis bedeutet dies, den Klassennamen für alles zu verwenden, was Sie stylen möchten. Während „nicht in einem Kaskadierungsstilheet nicht eingehalten“ kann für einige lächerlich klingen, vermeiden hilfreich. Einer der Hauptvorteile der BEM -Methode besteht jedoch darin, dass die Spezifität jedes Selektors unverändert wird Sie beseitigen tatsächlich zukünftige Probleme mit der Selektorspezifität in Ihrem Projekt.

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

hinzuzufügen

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>

Dies erzeugt:

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

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

andere beliebte Präprozessoren wie Less und Stylus bieten diese Funktion ebenfalls an.

Spezifikation der Regeln

Hinzufügen von Präfixen Unser ursprünglicher Klassenauswahlschalter 0,1,0 mit Typ -Selektor führt zu 0,1,1 und Präfixen mit ID - 1,1,0. Der Nachteil hier ist, dass Sie, sobald Sie ein Selektorpräfix mit dem schwersten Selektor in Ihrem Code hinzufügen (d. H.

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

Das Hinzufügen von Selektorpräfix ist nützlich, aber es ist keine unendlich skalierbare Lösung. Möglicherweise haben Sie nur begrenzte Möglichkeiten, um das Elternteil zu lokalisieren. Sobald Sie mehrere Selektoren mit der schwersten Option in Ihrem Code vorfixieren, beschränken Sie die Optionen, um Spezifitätsprobleme später zu beheben (insbesondere wenn Sie ID verwenden). Die Front-End-Community wurde kürzlich an eine sehr nützliche CSS-Funktion erinnert-Selbstverwalter-Selektoren, um ihre Spezifität zu verbessern. Selbstkettenwählern sind für ID-, Klassen- und Attribut-Selektoren geeignet, nicht jedoch für Typauswahl. Wenn Sie jedoch hauptsächlich Klassen verwenden, um Inhalte zu stylen, bietet Ihnen der Self-Chain-Selektor eine unendlich skalierbare Möglichkeit, einen Selektor außer Kraft zu setzen. Mit dem übergeordneten Referenzauswahl können Sie denselben Selektor problemlos mehrmals mit sich selbst verknüpfen (dies gilt für ID-, Klassen- und Attribut -Selektoren, jedoch nicht für die Eingabe von Selektoren). Sie müssen jedoch jedes und nach dem ersten einfügen, die Mindestanforderung beträgt SASS 3.4:

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

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

In ähnlicher Weise können Sie dies mit weniger und Stift tun. Wenn dies für Ihren Geschmack zu hässlich ist, können Sie immer ein Mixin erstellen, das die Spezifität eines einzelnen Selektors iterativ verbessert. Dieser Mixin verwendet einige erweiterte Funktionen und erfordert auch SASS 3.4:

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

CSS erstellt:

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

Sie können das gleiche Mixin in Stylus erstellen, leider gibt es keine einfache Möglichkeit, ein solches Mixin in weniger zu erstellen.

Spezifikation der Regeln

Die Selbstverkäufe erhöht die Spezifität des Selektors von 0,1,0 auf 0,2,0 und so weiter, was sie fast unendlich skalierbar macht.

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.

Das obige ist der detaillierte Inhalt vonSelektorspezifität mit CSS -Präprozessoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!