不要與級聯戰鬥，控制它！

掌握CSS級聯：告別混亂，擁抱掌控！本文將探討如何利用新的CSS特性來掌控級聯，從而編寫更簡潔高效的CSS代碼。以往，來自不同來源的樣式常常導致級聯難以管理，最終產生冗餘代碼。即使使用ITCSS和BEM等方法，我們仍然會面臨級聯帶來的挑戰，例如需要精確控制@import語句的位置或不得不求助於!important 。幸運的是，一些新的工具已經問世，讓我們能夠有效地控制級聯。

駕馭:where偽選擇器

:where偽選擇器允許我們消除選擇器的特殊性，使其優先級僅高於用戶代理默認樣式，而與CSS加載順序無關。這意味著選擇器的特殊性實際上為零，這對於通用組件非常有用。

例如，使用:where定義通用的表格樣式：

 :where(table) {
  background-color: tan;
}

即使在此之前定義了其他表格樣式：

 table {
  background-color: hotpink;
}

:where(table) {
  background-color: tan;
}

表格背景色仍然為tan ，因為:where消除了選擇器的特殊性。這使得:where非常適合CSS重置。

:where的兄弟選擇器:is則具有相反的效果：

:is()偽類的特殊性由其最特殊參數的特殊性決定。因此，使用:is()編寫的選擇器並不一定具有與不使用:is()編寫的等效選擇器相同的特殊性。 ——選擇器級別4規範

繼續之前的例子：

 :is(table) {
  --tbl-bgc: orange;
}
table {
  --tbl-bgc: tan;
}
:where(table) {
  --tbl-bgc: hotpink;
  background-color: var(--tbl-bgc);
}

表格背景色將為tan ，因為:is的特殊性與table相同，而table位於之後。但是，如果我們將其更改為：

 :is(table, .c-tbl) {
  --tbl-bgc: orange;
}

背景色將為orange ，因為:is的權重與其最特殊的選擇器.c-tbl相同。

示例：可配置的表格組件

讓我們構建一個表格組件，HTML如下：

接下來，我們將.c-tbl包裹在:where選擇器中，並添加圓角：

 :where(.c-tbl) {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  width: 99.9%;
}

表格單元格使用不同的樣式：

 :where(.c-tbl thead th) {
  /* ... */
}
:where(.c-tbl tbody td) {
  /* ... */
}

由於圓角和border-collapse: separate ，我們需要添加額外的樣式：

 :where(.c-tbl tr td:first-of-type) {
  /* ... */
}
/* ... */

現在，我們可以通過在通用樣式之前或之後注入其他樣式來創建表格組件的變體（得益於:where的特殊性消除功能）：

 .c-tbl--purple th {
  background-color: hsl(330, 50%, 40%)
}
/* ... */

CSS自定義屬性

我們將使用data-component屬性來定義組件：

通用樣式將應用於所有組件實例，特定組件實例的樣式將包含在常規類中，並使用通用組件的自定義屬性。

 :where([data-component="table"]) {
  /* ... */
}
.c-tbl--purple {
  /* ... */
}

在通用組件中，每個CSS屬性都指向一個自定義屬性。需要作用於子元素的屬性（如border-color ）在通用組件的根部指定：

 :where([data-component="table"]) {
  --tbl-hue: 200;
  /* ... */
}
:where([data-component="table"] td) {
  border-color: var(--tbl-bdc);
}

其他屬性可以設置靜態值或使用自定義屬性進行配置。如果使用自定義屬性，請記住定義一個默認值，以便在缺少變體類時使用。

 :where([data-component="table"]) {
  background-color: var(--tbl-bgc, transparent);
  /* ... */
}

我們可以使用自定義屬性來控制列對齊和寬度：

 :where([data-component="table"] tr > *:nth-of-type(1)) {
  text-align: var(--ca1, initial);
  /* ... */
}

現在，讓我們創建特定組件樣式，使用常規類.c-tbl ：

 .c-tbl {
  --tbl-hue: 330;
}

我們只需要更新屬性，而無需編寫全新的CSS！更改一個屬性即可更新表格的顏色。

我們可以編寫更複雜的樣式，例如斑馬條紋：

 .c-tbl tr:nth-child(even) td {
  --tbl-td-bgc: hsl(var(--tbl-hue), var(--tbl-sat), 95%);
}

使用另一個data-attribute添加參數

我們可以添加另一個data-param屬性來添加更多參數：

然後，在CSS中，我們可以使用屬性選擇器來匹配參數列表中的整個單詞。例如，斑馬條紋行：

 [data-component="table"][data-param~="zebrarow"] tr:nth-child(even) td {
  --tbl-td-bgc: var(--tbl-zebra-bgc);
}

或者斑馬條紋列：

 [data-component="table"][data-param~="zebracol"] td:nth-of-type(odd) {
  --tbl-td-bgc: var(--tbl-zebra-bgc);
}

級聯層

最後一個控制級聯的工具是“級聯層”。目前，它是一個實驗性功能，可以在Safari或Chrome中啟用#enable-cascade-layers標誌來訪問。

級聯層允許我們以特定順序注入樣式表。一個簡化的結構如下：

 @layer generic, components;

這決定了層的順序。首先是通用樣式，然後是組件特定樣式。

即使組件樣式寫在通用樣式之前，組件樣式層仍然優先：

 @layer components {
  body {
    background-color: lightseagreen;
  }
}

@layer generic { 
  body {
    background-color: tomato;
  }
}

總結

:where和:is偽選擇器允許我們控制特殊性；CSS自定義屬性允許我們覆蓋樣式而無需編寫新的類； data-attribute可以增加靈活性；級聯層允許我們指定樣式的加載順序。 CSS級聯不再是敵人，而是我們可以掌控的工具。

圖片來自Stephen Leonardi在Unsplash

以上是不要與級聯戰鬥，控制它！的詳細內容。更多資訊請關注PHP中文網其他相關文章！