Die neuesten Wege, um mit Kaskade, Vererbung und Spezifität umzugehen

Die Kaskade ist ein so wesentlicher Bestandteil von CSS, dass sie direkt im Namen steckt. Wenn Sie jemals !important verwenden mussten, um die Spezifität in der Kaskade zu beeinflussen, wissen Sie, dass dies eine knifflige Sache sein kann. In den frühen Tagen von CSS war es üblich, hochspezifische Selektoren wie diesen zu sehen

#sidebar ul li {}

Wir sind heutzutage viel besser darin, Spezifität zu verwalten. Es ist eine allgemein anerkannte Best Practice, die Spezifität niedrig und flach zu halten – ID-Selektoren zu meiden, Klassen großzügig zu verwenden und unnötige Verschachtelungen zu vermeiden. Aber es gibt immer noch viele Situationen, in denen ein spezifischerer Selektor nützlich sein wird. Mit der Einführung einer neu vorgeschlagenen Pseudoklasse, mehr Unterstützung für Shadow DOM und der Verwendung der all-Eigenschaft können wir bald Vererbung und Spezifität auf neue und aufregende Weise handhaben.

Die :is() Pseudoklasse

Lea Verou hat kürzlich diese neue Pseudoklasse vorgeschlagen, die speziell zur Steuerung der Spezifität entwickelt wurde. Sie hat bereits ihren Weg in die CSS Level 4 Selectors spec gefunden. Lea hat eine Aufzeichnung darüber, warum sie nützlich ist, und es gibt einige Berichte darüber im CSS-Tricks-Almanach.

Nehmen wir :not als Beispiel. Die Spezifität von :not ist gleich der Spezifität seines Arguments. Dies macht die Verwendung von :not ziemlich mühsam. Betrachten Sie das folgende Beispiel

Wir könnten erwarten, dass die Klasse .red eine höhere Spezifität hat, da sie niedriger in der Kaskade liegt. Damit jedoch Stile div:not(.foobar) überschreiben können, müssten sie mindestens die Spezifität eines kombinierten Elementselektors (div) und Klassenselektors (.foobar) erreichen. Ein anderer Ansatz wäre div.red, aber es gibt einen besseren Weg. Hier kann :is helfen.

div:is(:not(.foobar)) {
  background-color: black;
}

Der :not-Selektor fügt keine Spezifität mehr hinzu, sodass die Gesamtspezifität des obigen Selektors einfach die eines Elementselektors (div) ist. Die Klasse .red könnte sie nun in der Kaskade überschreiben. Sobald implementiert, werden Spezifitäts-Hacks der Vergangenheit angehören.

Shadow DOM

Heute verwenden viele Leute Klassen in HTML wie folgt

<form class="site-search site-search--full">
  <input type="text" class="site-search__field">
  <button type="Submit" class="site-search__button">search</button>
</form>

Bei der Verwendung von Shadow DOM können wir anstelle einer wortreichen Namenskonvention Klassen sogar ganz weglassen. Innerhalb des Shadow DOM definierte Stile sind so begrenzt, dass sie nur innerhalb der Komponente angewendet werden. Das Styling kann mit einfachen Elementselektoren erreicht werden, ohne sich Sorgen machen zu müssen, ob die Selektoren Elemente an anderer Stelle auf der Seite beeinträchtigen.

Es ist befreiend, so einfaches CSS zu schreiben. Kein Aufwand mehr für die Namensgebung. Shadow DOM scheint seinen Weg zur vollen Browserunterstützung zu finden. Es wird wahrscheinlich in die nächste Version von Firefox aufgenommen, während Edge die Implementierung als hohe Priorität hat.

Die all-Eigenschaft

Die all-Eigenschaft ist eine Möglichkeit, alle CSS-Eigenschaften auf einmal festzulegen – von align-content bis z-index. Welche Werte akzeptiert sie? Mir fällt kein Anwendungsfall ein, bei dem ich alle Eigenschaften auf inherit setzen möchte, aber das ist eine Option. Dann gibt es initial, was eher einem CSS-Reset ähnelt, bei dem alle Stile wegfallen. Keine Polsterung. Kein Rand. Der Anfangswert ist pro Eigenschaft festgelegt, unabhängig vom Element, auf das er angewendet wird. Der Anfangswert von display ist inline, selbst wenn Sie ihn auf ein Div anwenden. Die font-style eines em-Tags ist normal, ebenso die font-weight eines strong-Tags. Linktext wird schwarz sein. Sie verstehen, was gemeint ist. (Den Anfangswert jeder CSS-Eigenschaft finden Sie auf MDN.) Dies schränkt seine Nützlichkeit möglicherweise ein, da es weiter geht, als wir möchten, indem es alle Stile unabhängig vom Kontext entfernt.

Leider ist der nützlichste Wert für all auch der am wenigsten verbreitete: revert. Er kann die von Ihnen als Entwickler angewendeten Stile entfernen und gleichzeitig die Standard-Benutzeragenten-Stile beibehalten. Wir alle haben eine Seite mit HTML ohne Stylesheet gesehen – schwarzes Times New Roman auf weißem (transparentem) Hintergrund mit blauen unterstrichenen Links. Wenn Sie wirklich Vererbung vermeiden möchten, dann deckt all: revert Sie ab. Alle Divs werden display: block sein und Spans werden inline sein. Alle em-Tags werden kursiv und strong-Tags fett sein. Links werden blau und unterstrichen sein.

Die Zukunft?

CSS-in-JS ist ein Hilferuf. Wir bei @csswg sollten dem Beachtung schenken und die Probleme angehen, bevor es schlimmer wird.https://#/lWQ4ct61ir

— Lea Verou (@LeaVerou) 24. Mai 2017

Die Vielzahl rivalisierender, nicht standardisierter Methoden zum Schreiben von CSS-in-JS war ein Versuch, dieselben Probleme zu umgehen. Dieser Ansatz hat in den letzten Jahren an Popularität gewonnen. Einige seiner Befürworter haben Vererbung, Kaskade und Spezifität als grundlegend fehlerhafte Designentscheidungen der Sprache bezeichnet. Die CSS Working Group am W3C reagiert, indem sie die Leistungsfähigkeit von CSS und der nativen Webplattform verbessert. Es wird interessant sein, das Ergebnis zu sehen…