Schreiben Sie weniger CSS mit den Pseudoklassen :is(), :where() und :has()

CSS hat sich im Laufe der Jahre stark weiterentwickelt. Es stellt viele neue leistungsstarke Tools vor, die das Leben einfacher machen. Von diesen Tools habe ich heute drei ausgewählt. Wir werden sehen, wie die Pseudoklassen :is(), :has() und :where() dabei helfen, Code zu vereinfachen, ihn lesbarer zu machen und Wiederholungen zu reduzieren.

In diesem Artikel erfahren Sie, was, wie und warum die Pseudoklassen :is(), :where() und :has() sind. Sie werden sehen, wie wir diese Pseudoklassen zum Entwerfen unserer Website verwenden können, indem wir weniger und dafür mehr optimierten Code schreiben, was eine hervorragende Praxis in der Softwareentwicklung sein kann.

Während wir uns mit Pseudoklassen befassen, finden Sie hier einen grundlegenden Überblick in einem Satz. In CSS ist eine Pseudoklasse eine Regel, die auf ein Element basierend auf einer bestimmten Bedingung oder einem bestimmten Zustand angewendet wird. Folgen Sie diesem Link, um mehr über Pseudoklassen zu erfahren.

Welches Problem lösen wir?

Beim Entwerfen unserer Website mit CSS (Cascading Stylesheet) sind wir alle mit Codewiederholungen konfrontiert.

Zum Beispiel:

.card .title, .card .body-content, .card .footer-action {
 ...
}

In diesem Beispiel habe ich einen .card-Selektor, der für jeden seiner untergeordneten Selektoren wiederholt wird. Aber gleichzeitig werden Sie auch sehen, dass auf sie das gleiche Styling angewendet wird.

So funktioniert der Gruppenselektor normalerweise in CSS, indem jeder Selektor durch ein Komma getrennt wird. Dieser Code funktioniert gut, aber mir geht es hier darum, Wiederholungen zu vermeiden und ihn nicht gut zu organisieren.

Ein weiteres Problem, mit dem wir hier konfrontiert sind, ist ein CSS-Spezifitätsproblem. Durch die Verwendung von Code wie diesem und zu vielen Wiederholungen vergessen wir manchmal, welcher Stil wo und unter welchen Bedingungen verwendet wird. Hier spielen diese Pseudoklassen eine wichtige Rolle.

Sehen wir uns jede Pseudoklasse einzeln an, um ihren Zweck zu verstehen.

Erklären der :is()-Pseudoklasse

Mit der Pseudoklasse

:is() können Sie mehrere Elemente auswählen, die gemeinsame Stile haben, ohne den gleichen Code zu wiederholen. Es vereinfacht Selektoren, indem es sie in einem einzigen Block zusammenfasst und so die Redundanz reduziert. Es verwendet eine Liste von Selektoren als Argument und wendet Stile auf alle Elemente an, die mit einem der Selektoren in dieser Liste übereinstimmen.

.card :is(.title, .body-content, .footer-action) {
 ...
}

Ich habe das obige Beispiel verwendet und Sie werden sehen, wie einfach es ist, Wiederholungen in unserem CSS-Code durch Gruppieren mit der Pseudoklasse :is() zu reduzieren. Es hält den Code sauber und effizient.

Das obige Beispiel zeigt, dass wir .title, .body-content und .footer-action als Argument für die Pseudoklasse :is() bereitstellen. Bevor :is() der übergeordnete Container .card definiert wird, um den Stil seiner untergeordneten Elemente vom anderen Code zu trennen. Auf diese Weise wendet :is() die gleichen Stile auf alle Argumente an, die mit seiner Liste übereinstimmen.

Die Pseudoklasse

:is() wird häufig in allen gängigen Browsern verwendet. Das folgende Bild von caniuse.com zeigt die detaillierte Übersicht für verschiedene Browserversionen:

...

Erklären Sie die Pseudoklasse :where()

Die Pseudoklasse :where() ist :is() sehr ähnlich. Wir können mehrere Selektoren gruppieren, um Wiederholungen in unserem Code zu reduzieren. Es nimmt Selektoren als Argument. Der Hauptunterschied zwischen der Pseudoklasse :is() und der Pseudoklasse :where() besteht darin, dass :where() keine Spezifität aufweist. Dies bedeutet, dass es hilfreich ist, wenn Sie Elemente formatieren möchten, ohne Ihrem CSS-Selektor zusätzliches Gewicht hinzuzufügen.

Der mit der Pseudoklasse :where() definierte Stil kann leicht überschrieben werden. Das bedeutet, dass :where() seinen Selektoren keine zusätzliche Spezifität hinzufügt und der Stil innerhalb der :where()-Pseudoklasse auf der eigenen Spezifität des Selektors basiert.

Der einzige gute Anwendungsfall für die Verwendung der Pseudoklasse :where() besteht darin, den Basisstil für mehrere Elemente zu definieren, und Sie möchten nicht, dass dieser Stil spezifischere Regeln beeinflusst, die ihn später möglicherweise überschreiben.

Auf diese Weise können Sie mit :where() Stile anwenden, ohne dass Ihr CSS zu eigensinnig darüber wird, welche Regeln in einem Konflikt gewinnen sollen.

/* Applying a default style */
:where(h1, p, a) {
  color: red; 
  font-size: 20px;
}

/* More specific style */
a {
  color: blue;
  font-size: 16px;
}

Im obigen Beispiel werden h1, p und a-Tags als Argument für die Pseudoklasse :where() für das Basis-Styling bereitgestellt. Danach kann ein Tag, der als eigenständiges Tag verwendet wird, mit seinem Stil problemlos den in :where().

definierten Stil überschreiben

Wie :is() wird auch :where() in fast allen gängigen Browsern unterstützt. Sehen Sie sich unten ein Bild von caniuse.com an, um die unterstützten Browserversionen zu überprüfen:

Erklären Sie die Pseudoklasse :has()

:has() ist ein übergeordneter Selektor. Dies bedeutet, dass Sie ein übergeordnetes Element basierend auf den darin enthaltenen untergeordneten Elementen auswählen können. Das ist eine große Sache, da CSS diese Art von Verhalten bisher nicht zuließ. Sie können :has() auch als if-Anweisung von CSS bezeichnen, da sie das bedingte Bedürfnis erfüllt.

Angenommen, Sie möchten ein Div nur formatieren, wenn es ein Bild enthält. Dies war mit herkömmlichem CSS nicht möglich, aber :has() hat es möglich gemacht.

<!-- Card with Image -->
<div class="card">
      <img  src="/static/imghwm/default1.png" data-src="https://placeholderjs.com/300x300" class="lazy" alt="Schreiben Sie weniger CSS mit den Pseudoklassen :is(), :where() und :has()" >
      <h1 id="Card-With-Image">Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
</div>

<!-- Card without Image -->
<div class="card">
      <h1 id="Card-With-Image">Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
      <a href="#">Call to Action</a>
    </div>

.card:has(a) {
  background-color: #e6e6e6;
}

.card:has(img) {
  background-color: #979759;
}

In this example, you see I have created two div elements with the same .card class, in CSS by using :has() pseudo-class. By using the same .card with :has() pseudo-class, two conditions are given with different styling that you can able to see in the image output.

:has() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:

Conclusion

As new features are introduced in CSS, the more power it gains, and allows writing code more readable, efficient, and optimized code. You have learned :is(), :where() and :has() pseudo-classes in this article, and you see how useful they are. These pseudo-classes make our job much easier, they can be easily maintained, and the code is optimized.

This article is to show you how powerful these features are, and we’re one step closer of using these features in our project. I highly suggest you use features like these to increase your productivity.

This post is originally posted at programmingly.dev. Read full article by following this link: write less CSS by using :is(), :where(), :has() pseudo-classes

Das obige ist der detaillierte Inhalt vonSchreiben Sie weniger CSS mit den Pseudoklassen :is(), :where() und :has(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!