使用 :is()、:where() 和 :has() 偽類別編寫更少的 CSS

CSS 多年來已經發展了很多。它引入了許多新的強大工具，使生活更輕鬆。今天我從這些工具中挑選了其中三個。我們將看到 :is()、:has() 和 :where() 偽類別如何幫助簡化程式碼、使其更具可讀性並減少重複。

本文將向您介紹 :is()、:where() 和 :has() 偽類的含義、方式和原因。您將看到我們如何使用這些偽類透過編寫更少且更優化的程式碼來設計我們的網站，這可能是軟體開發中的絕佳實踐。

當我們將探索偽類時，這裡用一句話進行了基本概述。在 CSS 中，偽類是基於特定條件或狀態應用於元素的規則。點擊此連結了解更多有關偽類的資訊。

我們要解決什麼問題？

使用CSS（級聯樣式表）設計我們的網站時，我們都面臨的一件事是程式碼重複。

例如：

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

在此範例中，我有一個 .card 選擇器，它的每個子選擇器都會重複該選擇器。但同時，您也會看到相同的樣式套用於它們。

這就是群組選擇器在 CSS 中正常運作的方式，用逗號分隔每個選擇器。這段程式碼工作正常，但我關心的是避免重複和組織不好。

我們在這裡面臨的另一個問題是 CSS 特異性問題。透過使用這樣的程式碼和過多的重複，有時我們會忘記在何處以及在什麼條件下使用什麼樣式。這就是這些偽類發揮重要作用的地方。

讓我們一一看看每個偽類以了解它們的用途。

解釋 :is() 偽類

:is() 偽類別可讓您選擇共享通用樣式的多個元素，而無需重複相同的程式碼。它透過將選擇器組合成一個區塊來簡化選擇器，從而減少冗餘。它將選擇器清單作為參數，並將樣式套用於與該清單中任何選擇器相符的所有元素。

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

我已經使用了上面的範例，您將看到透過使用 :is() 偽類別分組來減少 CSS 程式碼中的重複是多麼容易。它使代碼保持乾淨和高效。

上面的範例顯示我們提供 .title、.body-content 和 .footer-action 作為 :is() 偽類別的參數。在 :is() 父容器 .card 之前定義，以使其子容器的樣式與其他程式碼分開。這就是 :is() 對與其清單相符的所有參數套用相同樣式的方式。

:is() 偽類廣泛應用於所有主流瀏覽器，下圖來自 caniuse.com，展示了不同版本瀏覽器的詳細概述：

...

解釋 :where() 偽類

:where() 偽類與 :is() 非常相似。我們可以將多個選擇器分組以減少程式碼中的重複。它接受選擇器作為參數。 :is() 和 :where() 偽類之間的主要區別在於，:where() 的特異性為零。這意味著當您想要設定元素樣式而不為 CSS 選擇器添加額外的權重時，它會很有幫助。

使用 :where() 偽類定義的樣式可以輕鬆覆蓋。這意味著 :where() 不會在其選擇器中添加額外的特異性，並且 :where() 偽類內部的樣式是基於選擇器本身的特異性。

使用 :where() 偽類的一個很好的用例是為多個元素定義基本樣式，並且您不希望該樣式影響以後可能會覆蓋它的任何更具體的規則。

這樣 :where() 就可以讓你應用樣式，而不會讓你的 CSS 過於固執地決定哪些規則應該在衝突中獲勝。

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

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

在上面的範例中，h1、p 和 a 標籤作為參數提供給 :where() 偽類以實現基本樣式。之後，用作獨立標籤及其樣式的標籤可以輕鬆覆蓋 :where().

中定義的樣式

像 :is() 一樣，幾乎所有主流瀏覽器都支援 :where()。請參閱 caniuse.com 上的下圖來檢查支援的瀏覽器版本：

解釋 :has() 偽類

:has() 是父選擇器。這意味著它允許您根據其包含的子元素選擇父元素。這是一件大事，因為 CSS 以前不允許這種行為。你也可以說 :has() 是 CSS 的 if 語句，因為它滿足了條件需求。

假設您只想為包含 img 的 div 設定樣式。這對傳統 CSS 來說是不可能的，但 :has() 使之成為可能。

<!-- Card with Image -->
<div class="card">
      <img src="https://placeholderjs.com/300x300" />
      <h1>Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
</div>

<!-- Card without Image -->
<div class="card">
      <h1>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

以上是使用 :is()、:where() 和 :has() 偽類別編寫更少的 CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！