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

駕馭:where偽選擇器

:where偽選擇器允許我們消除選擇器的特殊性，使其優(yōu)先級(jí)僅高於用戶(hù)代理默認(rèn)樣式，而與CSS加載順序無(wú)關(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()偽類(lèi)的特殊性由其最特殊參數(shù)的特殊性決定。因此，使用:is()編寫(xiě)的選擇器並不一定具有與不使用:is()編寫(xiě)的等效選擇器相同的特殊性。 ——選擇器級(jí)別4規(guī)範(fàn)

繼續(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如下：

接下來(lái)，我們將.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)在，我們可以通過(guò)在通用樣式之前或之後注入其他樣式來(lái)創(chuàng)建表格組件的變體（得益於:where的特殊性消除功能）：

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

CSS自定義屬性

我們將使用data-component屬性來(lái)定義組件：

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

 :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)值，以便在缺少變體類(lèi)時(shí)使用。

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

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

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

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

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

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

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

 .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屬性來(lái)添加更多參數(shù)：

然後，在CSS中，我們可以使用屬性選擇器來(lái)匹配參數(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)誌來(lái)訪(fǎng)問(wèn)。

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

 @layer generic, components;

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

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

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

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

總結(jié)

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

圖片來(lái)自Stephen Leonardi在Unsplash

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