前端開發(fā)如何更好的避免樣式?jīng)_突？級(jí)聯(lián)層(CSS@layer)

作者：Zhang Jiqi 2023-05-25 08:39:05

本文主要講述了CSS中的級(jí)聯(lián)層（CSS@layer），討論了級(jí)聯(lián)以及級(jí)聯(lián)層的創(chuàng)建、嵌套、排序和瀏覽器支持情況。級(jí)聯(lián)層可以用于避免樣式?jīng)_突，提高代碼可讀性和可維護(hù)性。

一、什么是級(jí)聯(lián)層(Cascade Layers)？

1.1 級(jí)聯(lián)層的官方定義

我們參看Cascading and Inheritance Level 5（13 January 2022）中6.4節(jié)所述：

級(jí)聯(lián)層提供了一種結(jié)構(gòu)化的方式來組織和平衡單個(gè)起源中的問題。單個(gè)級(jí)聯(lián)層內(nèi)的規(guī)則級(jí)聯(lián)在一起，不與層外的樣式規(guī)則交錯(cuò)。

開發(fā)者可以創(chuàng)建層來表現(xiàn)元素默認(rèn)值、第三方庫(kù)、主題、組件、覆蓋和其他樣式問題，并且能夠以顯式方式重新排序?qū)蛹?jí)，而無需更改每個(gè)層內(nèi)的選擇器或特異性，或依賴源順序來解決跨層的沖突。

單純看官方定義和概括可能比較晦澀，下面我們會(huì)結(jié)合案例來說清楚。

1.2 級(jí)聯(lián)層為了解決什么問題？

簡(jiǎn)而言之：級(jí)聯(lián)層的出現(xiàn)就是為了使 CSS 開發(fā)者可以更簡(jiǎn)單直接地控制級(jí)聯(lián)。

我們來假設(shè)日常開發(fā)中的一個(gè)場(chǎng)景，從場(chǎng)景去理解級(jí)聯(lián)層在解決什么問題。

如下圖：

我們?cè)瓉淼?display'文案是紅色，當(dāng)我們引入了一個(gè)第三方組件庫(kù)，第三方庫(kù)中有以下樣式。

/* 開發(fā)者樣式 */
  .item {
    color: red;
  }
/* 第三方庫(kù) */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }

就會(huì)導(dǎo)致'display'文案變成綠色。

我們想要將'display'文案的顏色由綠色改成紅色一般的手段是增加選擇器特異性（優(yōu)先級(jí)）。比如在開發(fā)頁(yè)面中對(duì)開發(fā)者樣式進(jìn)行修改：

/* 開發(fā)者樣式 */
  #app div.item {
    color: red;
  }
 /* 第三方庫(kù) */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }

或者借助級(jí)聯(lián)中出場(chǎng)順序?qū)?yōu)先級(jí)的影響在用戶頁(yè)面中重寫

/* 第三方庫(kù) */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
 /* 開發(fā)者樣式 */
  #app .item {
    color: red;
  }

效果如下：

再舉個(gè)例子：

比如有可能第三方組件寫了

a { color: blue; }

那項(xiàng)目開發(fā)中由于引入這個(gè)第三方組件就會(huì)導(dǎo)致樣式污染，因?yàn)榈谌綆?kù)的樣式往往都在項(xiàng)目設(shè)置的通用樣式比如common.css后加載。

如果后面想在代碼中覆蓋某些屬性，使用高特異性選擇器的語句就可能會(huì)導(dǎo)致問題。然后因?yàn)橛袉栴}就會(huì)選擇更高特異性的擇器的語句或使用!important，這會(huì)使代碼變得冗長(zhǎng)也可能會(huì)帶來副作用。低特異性選擇器的語句很容易被后面出現(xiàn)在代碼中的語句覆蓋。在自己的代碼之后加載第三方 CSS 時(shí)特別會(huì)出現(xiàn)這種問題。

所以級(jí)聯(lián)層就是為了解決以上場(chǎng)景出現(xiàn)的，級(jí)聯(lián)層在級(jí)聯(lián)中的的位置是在內(nèi)聯(lián)樣式和選擇器特異性之間。當(dāng)有些css聲明就是設(shè)置要低優(yōu)先級(jí)且不受選擇器特異性影響那么使用級(jí)聯(lián)層再合適不過。

運(yùn)用級(jí)聯(lián)層解決第一個(gè)日常開發(fā)場(chǎng)景痛點(diǎn)的css代碼如下：

/* 排序?qū)?*/
@layer reset, lib;
/* 通用樣式 */
@layer reset {
  #app .item {
    color: black;
    width: 100px;
    padding: 1em;
  }
}
/* 第三方庫(kù)樣式 */
/*我們將第三方庫(kù)的樣式全部放到lib層*/
/*這里一般使用@import導(dǎo)入的方式*/
/*為了示例簡(jiǎn)單我們簡(jiǎn)化了操作*/


@layer lib {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    width: 130px;
  }
}
/* 開發(fā)者樣式 */
.item {
  color: red;
}

為了知道為什么上面的css代碼能解決沖突問題，更好地理解級(jí)聯(lián)層的作用，理解一些現(xiàn)象背后的根因，了解級(jí)聯(lián)層和級(jí)聯(lián)的關(guān)系，我們繼續(xù)往下看。

二、理解級(jí)聯(lián)層的前提——級(jí)聯(lián)(cascade)

2.1 什么是級(jí)聯(lián)？

CSS中有兩個(gè)重要的基礎(chǔ)規(guī)則，一個(gè)是繼承，一個(gè)是級(jí)聯(lián)。

繼承

指的是類似 color，font-family，font-size，line-height 等屬性父元素設(shè)置后，子元素會(huì)繼承的特性。

級(jí)聯(lián)

可以簡(jiǎn)單理解為是CSS 用來解決要應(yīng)用于元素的具體樣式的算法。也就是基于一些優(yōu)先級(jí)排序輸出給給定元素上屬性值一個(gè)級(jí)聯(lián)值。級(jí)聯(lián)值是級(jí)聯(lián)的結(jié)果。

2.2 當(dāng)前級(jí)聯(lián)的排序標(biāo)準(zhǔn)

我們參看Cascading and Inheritance Level 5（13 January 2022） 中6.1節(jié)，

相比于Cascading and Inheritance Level 4（14 January 2016）中的定義有明顯變化。

最重要的變化就是增加了級(jí)聯(lián)層。由此級(jí)聯(lián)排序變成：

起源和重要性（Origin and Importance）
上下文（Context）
樣式屬性（Element-Attached Styles）
層（Layers）
特異性（Specificity）
出場(chǎng)順序（又名源代碼順序）（Order of Appearance）

瀏覽器在確定最終元素樣式呈現(xiàn)的時(shí)候，會(huì)依據(jù)這些準(zhǔn)則按照優(yōu)先權(quán)從高到低排序，并且會(huì)一個(gè)一個(gè)的檢查，直到確定最終樣式。

2.3 級(jí)聯(lián)起源（Cascading Origins）

2.3.1 三個(gè)核心起源

css中每個(gè)樣式規(guī)則有三個(gè)核心起源，它決定了它進(jìn)入級(jí)聯(lián)的位置，理解起源優(yōu)先級(jí)是理解級(jí)聯(lián)的關(guān)鍵。

用戶代理來源（瀏覽器內(nèi)置樣式）
用戶來源（瀏覽器的用戶設(shè)置）
作者來源（Web開發(fā)者）

2.3.2 起源的優(yōu)先級(jí)

Css聲明的起源取決于它來自哪里，重要性在于它是否用!important聲明。

各種起源的優(yōu)先級(jí)按降序排列：

過渡
重要的用戶代理
重要用戶
重要作者
動(dòng)畫
普通作者
普通用戶
普通用戶代理

越靠前來源的聲明優(yōu)先級(jí)越高。過渡和動(dòng)畫我們可以暫時(shí)忽略。

2.4 熟悉又陌生的 !important

通常作為開發(fā)者，!important會(huì)被我們視為一種增加特異性的方法，用以覆蓋內(nèi)聯(lián)樣式或特異性較高的選擇器。

但是!important設(shè)計(jì)出來的初衷是作為整體級(jí)聯(lián)中的一個(gè)特性，來平衡開發(fā)者、用戶設(shè)置和瀏覽器內(nèi)置之間對(duì)css優(yōu)先級(jí)的影響能力。

默認(rèn)情況下三者的優(yōu)先級(jí)是：作者來源> 用戶來源>用戶代理來源（可以參看上文起源優(yōu)先級(jí)中6-8的排序）。但是當(dāng)css聲明添加!important之后會(huì)使它們的優(yōu)先順序顛倒（參看上文起源優(yōu)先級(jí)中2-4的排序）。

如果站在瀏覽器和用戶的角度看!important提供了在必要時(shí)重獲優(yōu)先級(jí)控制權(quán)的能力，而非只是簡(jiǎn)單的增加特異性。

舉個(gè)例子：

瀏覽器默認(rèn)樣式表包含我們開發(fā)者無法覆蓋的重要樣式。

瀏覽器對(duì)具有'hidden'類型的input輸入框設(shè)置了默認(rèn)的展示屬性并且將其聲明為重要。

input[type=hidden i] { display: none !important; }

看下面兩張圖例：

第一張可以看出我們對(duì)具有'hidden'類型的input輸入框的展示屬性設(shè)置成了顯示并且聲明為重要

第二張是樣式最終計(jì)算結(jié)果：隱藏

從上面的瀏覽器表現(xiàn)可以看到我們作為開發(fā)者在作者樣式表中設(shè)置的規(guī)則沒能覆蓋用戶代理樣式表中的相同規(guī)則。

這驗(yàn)證了上面說的：在級(jí)聯(lián)中!important會(huì)顛倒三大核心起源默認(rèn)優(yōu)先順序。

驗(yàn)證的過程中還發(fā)現(xiàn)了一個(gè)chrome控制臺(tái)這邊的bug，看上面的第一張圖例：沒生效的規(guī)則不劃刪除線，生效的反而劃刪除線了。

再看一個(gè)官方文檔的例子加強(qiáng)一下理解：

圖片來源：w3.org

font-size的值最終是‘12pt ’。

因?yàn)樽髡邩邮奖碇刑砑?important的規(guī)則優(yōu)先權(quán)高于用戶樣式表中普通規(guī)則。

text-indent的值最終是‘1em’。

因?yàn)殡m然兩個(gè)樣式表都標(biāo)注了!important，但是標(biāo)注!important用戶聲明優(yōu)先級(jí)大于標(biāo)注!important作者聲明。

2.5 一張圖帶你理解級(jí)聯(lián)

下圖可以幫助我們直觀的理解級(jí)聯(lián)以及級(jí)聯(lián)層在級(jí)聯(lián)中的位置：

圖片來源：css-tricks

我們會(huì)發(fā)現(xiàn)平時(shí)操作最多的選擇器特異性（selector specificity）只是級(jí)聯(lián)中的一小部分。也輕松地理解了為什么內(nèi)聯(lián)樣式優(yōu)先級(jí)天然高。同時(shí)我們會(huì)發(fā)現(xiàn)!important在級(jí)聯(lián)中有特殊地位。他穿插在級(jí)聯(lián)規(guī)則的各個(gè)階段并能顛倒優(yōu)先級(jí)。

三、級(jí)聯(lián)層(CSS@layer) 使用探索

3.1 @layer 是什么？

我們來看MDN上的定義：

The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.

也就是說 @layer 這個(gè)at-rule（AT規(guī)則）用于聲明級(jí)聯(lián)層（cascade layer），也能用于定義多個(gè)級(jí)聯(lián)層的優(yōu)先級(jí)。

At-rules 是什么？

At-rules是指導(dǎo) CSS 如何表現(xiàn)的CSS 語句。它們以 at 符號(hào) ' @' ( U+0040 COMMERCIAL AT) 開頭，后跟一個(gè)標(biāo)識(shí)符，包括下一個(gè)分號(hào) ' ;' ( U+003B SEMICOLON) 或下一個(gè)CSS 塊之前的所有內(nèi)容。

我們開發(fā)常見的at-rule有@charset、@media、@font-face 、@keyframes 等。

3.2 @layer的句法規(guī)則

@layer的句法如下：

@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}

3.3 如何創(chuàng)建級(jí)聯(lián)層

可以通過多種方式創(chuàng)建級(jí)聯(lián)層。

第一種方法是：創(chuàng)建命名的級(jí)聯(lián)層，其中包含該層的 CSS 規(guī)則，如下所示：

@layer green {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}
 
@layer special {
  .item {
    color: rebeccapurple;
  }
}

第二種方法是：創(chuàng)建一個(gè)命名的級(jí)聯(lián)層而不分配任何樣式。這可以是單層，如下所示：

@layer green;

可以一次定義多個(gè)層，如下：

@layer green, special

一次定義多個(gè)層有什么好處呢？

因?yàn)?strong>聲明層的初始順序決定了層的優(yōu)先級(jí)。與聲明一樣，如果在多個(gè)層中找到聲明，最后定義的層聲明將最終生效。看下面代碼：

@layer green,special;
@layer green {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}
@layer special {
  .item {
    color: rebeccapurple;
  }
}

效果如下圖：

special層中item樣式規(guī)則將被應(yīng)用即使它的特異性低于 green層中的規(guī)則。這是因?yàn)?strong>一旦層順序定義完成，就會(huì)忽略選擇器特異性。

同樣也會(huì)忽略出現(xiàn)的順序：

我們聲明層名稱并設(shè)置它們的順序后，可以通過重新聲明名稱來將 CSS 規(guī)則添加到圖層。然后將樣式附加到層，并且層順序不會(huì)更改。比如如下代碼雖然@layer green重新聲明了并在文件后方但是由于順序一開始已經(jīng)設(shè)置所以字體顏色還是紫色：

@layer green,special;
@layer special {
  .item {
    color: rebeccapurple;
  }
}
 
@layer green {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}

效果如下：

忽略選擇器特異性和代碼出現(xiàn)順序可以讓我們創(chuàng)建更簡(jiǎn)單的 CSS 選擇器，并使代碼優(yōu)雅，因?yàn)椴槐卮_保選擇器具有足夠高的特異性來覆蓋其他css規(guī)則，只需要確保它出現(xiàn)在后面的層中。

第三種方法是：創(chuàng)建一個(gè)沒有名稱的級(jí)聯(lián)層。例如：

@layer {
  .item {
    color: black;
  }
}

這將創(chuàng)建一個(gè)匿名級(jí)聯(lián)層，該層功能與命名層相同。但是使用匿名層有如下缺點(diǎn):

可讀性較差：匿名層沒有名稱，會(huì)導(dǎo)致樣式表不易閱讀和理解。特別是在大型項(xiàng)目中，可能會(huì)出現(xiàn)樣式不斷增加，難以跟蹤和管理的問題。
難以擴(kuò)展：如果稍后想要更改特定樣式或組合，也會(huì)很難找到特定的代碼塊。
不可復(fù)用性：匿名層中的樣式不能在其他地方重復(fù)使用或引用。這樣會(huì)使樣式表更難以管理和維護(hù)。

平時(shí)我們盡量避免使用匿名層。但當(dāng)我們是樣式庫(kù)的作者，并想將某些css代碼不被使用者修改可以借助匿名層做到這一點(diǎn)。

第四種方法是：使用@import。CSS 原生支持 @import 導(dǎo)入其他 CSS 文件。

@import url(index.css) layer(index);

同時(shí)，也支持匿名引入，例如：

@import url(index.css) layer;

我們?cè)谑褂聾import時(shí)候需要放在除@charset之外的樣式規(guī)則前，否則無法導(dǎo)入。

可能的第五種方式仍在討論中：通過元素上的屬性。請(qǐng)參閱[css-cascade] Provide an attribute for assigning ato a cascade layer #5853。

3.4 層的嵌套規(guī)則

圖層可以嵌套。例如：

@layer base {
  p { max-width: 70ch; }
}
@layer framework {
  @layer base {
    p { margin-block: 0.75em; }
  }
  @layer theme {
    p { color: #222; }
  }
}

生成的層可以表示為一棵樹：

1.base

framework
base

2.theme

或可以用扁平列表表示

base
framework.base
framework.theme

要將樣式附加到嵌套層，您需要使用以下全名來引用它：

@layer framework {
  @layer default {
     p { margin-block: 0.75em; }
  }
  @layer theme {
    p { color: #222; }
  }
}
@layer framework.theme {
  /* 這些樣式會(huì)被添加到framework層里面的theme層 */
  blockquote { color: rebeccapurple; }
}

看效果：

3.5 層的排序規(guī)則

級(jí)聯(lián)層按照它們聲明的順序排序。第一層優(yōu)先級(jí)最低，最后一層優(yōu)先級(jí)最高。但是，未分層的樣式具有最高優(yōu)先級(jí)：

/* 未分層 */a { color: green; }
@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 { a { color: yellow; } }

優(yōu)先級(jí)順序如下：

未分層樣式
layer-3
layer-2
layer-1

看下圖示例：

層可以在一個(gè)地方被定義圖層（以建立圖層順序），然后在任何地方添加樣式

/* 定義在一個(gè)地方 */
@layer my-layer;
/* 其他樣式*/
...
/* 在某個(gè)地方添加樣式 */
@layer my-layer { a { color: red; } }

3.6 加上!important之后的排序規(guī)則

/* 未分層 */ a { color: green !important; }
@layer layer-1 { a { color: red !important; } }
@layer layer-2 { a { color: orange !important; } }
@layer layer-3 { a { color: yellow !important; } }

任何加上重要聲明的樣式都以相反的順序應(yīng)用

優(yōu)先級(jí)順序如下：

!important layer-1
!important layer-2
!important layer-3
!important 未分層樣式

看下圖示例：

這里我們看到對(duì)應(yīng)規(guī)則在chrome瀏覽器的顯示是正確的。但是在開發(fā)者控制臺(tái)中的樣式一欄規(guī)則顯示有問題。應(yīng)該是chrome瀏覽器開發(fā)者控制臺(tái)的bug。

3.7 嵌套層的排序規(guī)則

@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 {
  @layer sub-layer-1 { a { color: yellow; } }
  @layer sub-layer-2 { a { color: green; } }
  /* 未嵌套 */ a { color: blue; }
}
/* 未分層 樣式 */ a { color: black; }

優(yōu)先級(jí)順序如下：

未分層樣式
layer-3
-layer-3 未嵌套
-layer-3 sub-layer-2
-layer-3 sub-layer-1
layer-2
layer-1

3.8 媒體查詢對(duì)層排序的影響

以下層順序?qū)⑷Q于匹配的媒體條件：

例如：

@media (min-width: 600px) {
   @layer layout {
     .item {
       font-size: x-large;
     }
   }
 }
 
@media (prefers-color-scheme: dark) {
  @layer theme {
     .item {
        color: red;
     }
   }
}

如果兩個(gè)媒體查詢的規(guī)則中匹配一個(gè)那么對(duì)應(yīng)的級(jí)聯(lián)層生效。如果兩者都匹配，那么圖層順序?qū)閘ayout, theme都生效。如果兩個(gè)都不匹配則不定義層。下圖是兩者都匹配的場(chǎng)景。

四、現(xiàn)在就能使用級(jí)聯(lián)層嗎？

4.1 目前瀏覽器支持程度

圖片來源：developer.mozilla.org

目前所有現(xiàn)代瀏覽器均已經(jīng)支持 @layer 規(guī)則。所有瀏覽器廠商都支持的特性未來一定比較實(shí)用。

4.2 W3C 鼓勵(lì)可以作為日常使用

SS 的標(biāo)準(zhǔn)化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C層疊樣式列表小組以及獨(dú)立CSS專家組成。W3C 本身并不制定標(biāo)準(zhǔn)，而是作為一個(gè)論壇式的平臺(tái)，接收來自小組成員的提交，并通過會(huì)議來商討制定標(biāo)準(zhǔn)，所有的提交以及討論都是公開透明的，可以在 W3C 網(wǎng)站上看到會(huì)議的記錄，可以簡(jiǎn)單分為4個(gè)大階段：

工作草案( WD )
候選人推薦( CR )
提議的建議( PR )
W3C 推薦( REC )

下圖可以幫助理解：

圖片來源：w3.org

W3C 通過狀態(tài)碼表示規(guī)范的成熟度。成熟度從低到高排序如下圖。

圖片來源：w3.org

再看下圖：包含layer概念的標(biāo)準(zhǔn)討論已經(jīng)到達(dá)CR階段。

圖片來源：w3.org

W3C 鼓勵(lì)從 CR階段的標(biāo)準(zhǔn) 開始可以作為日常使用。

五、總結(jié)

最后，我們回到通過級(jí)聯(lián)層如何解決“引入了一個(gè)第三方組件庫(kù)導(dǎo)致樣式覆蓋“的問題上。

css代碼如下：

/* 排序?qū)?*/
@layer reset, lib;
/* 通用樣式 */
@layer reset {
  #app .item {
    color: black;
    width: 100px;
    padding: 1em;
  }
}
/* 第三方庫(kù)樣式 */
/*我們將第三方庫(kù)的樣式全部放到lib層，這里一般使用@import導(dǎo)入的方式，為了示例簡(jiǎn)單我們簡(jiǎn)化了操作*/
@layer lib {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    width: 130px;
  }
}
/* 開發(fā)者樣式 */
.item {
  color: red;
}

我們將第三方庫(kù)的樣式全部放到lib層，將需要重置的一些樣式放到reset層，自己開發(fā)的樣式不放入層中（當(dāng)然你也可以放入到一層然后排序在最后）。由此我們實(shí)現(xiàn)了樣式的分層解決了第三方組件庫(kù)導(dǎo)致樣式覆蓋的問題，而且做到開發(fā)者樣式簡(jiǎn)單不冗長(zhǎng)。

效果如下：