掌握CSS級(jí)聯(lián)：告別混亂，擁抱掌控！本文將探討如何利用新的CSS特性來掌控級(jí)聯(lián)，從而編寫更簡(jiǎn)潔高效的CSS代碼。以往，來自不同來源的樣式常常導(dǎo)致級(jí)聯(lián)難以管理，最終產(chǎn)生冗余代碼。即使使用ITCSS和BEM等方法，我們?nèi)匀粫?huì)面臨級(jí)聯(lián)帶來的挑戰(zhàn)，例如需要精確控制@import語句的位置或不得不求助于!important。幸運(yùn)的是，一些新的工具已經(jīng)問世，讓我們能夠有效地控制級(jí)聯(lián)。

駕馭:where偽選擇器

:where偽選擇器允許我們消除選擇器的特殊性，使其優(yōu)先級(jí)僅高于用戶代理默認(rèn)樣式，而與CSS加載順序無關(guān)。這意味著選擇器的特殊性實(shí)際上為零，這對(duì)于通用組件非常有用。

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

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

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

table {
  background-color: hotpink;
}

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

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

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

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

繼續(xù)之前的例子：

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

表格背景色將為tan，因?yàn)?code>:is的特殊性與table相同，而table位于之后。但是，如果我們將其更改為：

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

背景色將為orange，因?yàn)?code>:is的權(quán)重與其最特殊的選擇器.c-tbl相同。

示例：可配置的表格組件

讓我們構(gòu)建一個(gè)表格組件，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) {
  /* ... */
}
/* ... */

現(xiàn)在，我們可以通過在通用樣式之前或之后注入其他樣式來創(chuàng)建表格組件的變體（得益于:where的特殊性消除功能）：

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

CSS自定義屬性

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

通用樣式將應(yīng)用于所有組件實(shí)例，特定組件實(shí)例的樣式將包含在常規(guī)類中，并使用通用組件的自定義屬性。

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

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

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

其他屬性可以設(shè)置靜態(tài)值或使用自定義屬性進(jìn)行配置。如果使用自定義屬性，請(qǐng)記住定義一個(gè)默認(rèn)值，以便在缺少變體類時(shí)使用。

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

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

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

現(xiàn)在，讓我們創(chuàng)建特定組件樣式，使用常規(guī)類.c-tbl：

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

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

我們可以編寫更復(fù)雜的樣式，例如斑馬條紋：

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

使用另一個(gè)data-attribute添加參數(shù)

我們可以添加另一個(gè)data-param屬性來添加更多參數(shù)：

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

[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);
}

級(jí)聯(lián)層

最后一個(gè)控制級(jí)聯(lián)的工具是“級(jí)聯(lián)層”。目前，它是一個(gè)實(shí)驗(yàn)性功能，可以在Safari或Chrome中啟用#enable-cascade-layers標(biāo)志來訪問。

級(jí)聯(lián)層允許我們以特定順序注入樣式表。一個(gè)簡(jiǎn)化的結(jié)構(gòu)如下：

@layer generic, components;

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

即使組件樣式寫在通用樣式之前，組件樣式層仍然優(yōu)先：

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

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

總結(jié)

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

圖片來自Stephen Leonardi在Unsplash

以上是不要與級(jí)聯(lián)戰(zhàn)斗，控制它！的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！