一、什么是級聯(lián)層(Cascade Layers)？1.1 級聯(lián)層的官方定義

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

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

(資料圖)

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

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

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

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

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

如下圖：

我們原來的"display"文案是紅色，當(dāng)我們引入了一個第三方組件庫，第三方庫中有以下樣式。

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

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

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

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

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

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

效果如下：

再舉個例子：

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

a { color: blue; }

那項目開發(fā)中由于引入這個第三方組件 就會導(dǎo)致樣式污染，因為第三方庫的樣式往往都在項目設(shè)置的通用樣式比如common.css后加載。

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

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

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

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

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

二、理解級聯(lián)層的前提——級聯(lián)(cascade)2.1 什么是級聯(lián)？

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

繼承

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

級聯(lián)

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

2.2 當(dāng)前級聯(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）中的定義有明顯變化。

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

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

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

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

2.3.1三個核心起源

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

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

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

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

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

過渡重要的用戶代理重要用戶重要作者動畫普通作者普通用戶普通用戶代理

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

2.4 熟悉又陌生的 !important

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

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

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

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

舉個例子：

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

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

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

看下面兩張圖例：

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

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

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

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

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

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

圖片來源：w3.org

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

因為作者樣式表中添加!important的規(guī)則優(yōu)先權(quán)高于用戶樣式表中普通規(guī)則。

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

因為雖然兩個樣式表都標(biāo)注了!important，但是標(biāo)注!important用戶聲明優(yōu)先級大于標(biāo)注!important作者聲明。

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

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

圖片來源：css-tricks

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

三、級聯(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 這個at-rule（AT規(guī)則） 用于聲明級聯(lián)層（cascade layer），也能用于定義多個級聯(lián)層的優(yōu)先級。

At-rules 是什么？

At-rules是指導(dǎo) CSS 如何表現(xiàn)的CSS 語句。它們以 at 符號 "@" ( U+0040 COMMERCIAL AT) 開頭，后跟一個標(biāo)識符，包括下一個分號 ";" ( U+003B SEMICOLON) 或下一個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)建級聯(lián)層

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

第一種方法是：創(chuàng)建命名的級聯(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)建一個命名的級聯(lián)層而不分配任何樣式。這可以是單層，如下所示：

@layer green;

可以一次定義多個層，如下：

@layer green, special

一次定義多個層有什么好處呢？

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

@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ī)則。這是因為一旦層順序定義完成，就會忽略選擇器特異性。

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

我們聲明層名稱并設(shè)置它們的順序后，可以通過重新聲明名稱來將 CSS 規(guī)則添加到圖層。然后將樣式附加到層，并且層順序不會更改。比如如下代碼雖然@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)建更簡單的 CSS 選擇器，并使代碼優(yōu)雅，因為不必確保選擇器具有足夠高的特異性來覆蓋其他css規(guī)則，只需要確保它出現(xiàn)在后面的層中。

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

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

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

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

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

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

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

同時，也支持匿名引入，例如：

@import url(index.css) layer;

我們在使用@import時候需要放在除@charset之外的樣式規(guī)則前，否則無法導(dǎo)入。

可能的第五種方式仍在討論中：通過元素上的屬性。請參閱[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

frameworkbase

2.theme

或可以用扁平列表表示

baseframework.baseframework.theme

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

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

看效果：

3.5層的排序規(guī)則

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

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

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

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

看下圖示例：

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

/* 定義在一個地方 */@layer my-layer;/* 其他樣式*/.../* 在某個地方添加樣式 */@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)先級順序如下：

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

看下圖示例：

這里我們看到對應(yīng)規(guī)則在chrome瀏覽器的顯示是正確的。但是在開發(fā)者控制臺中的樣式一欄規(guī)則顯示有問題。應(yīng)該是chrome瀏覽器開發(fā)者控制臺的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)先級順序如下：

未分層 樣式layer-3-layer-3 未嵌套-layer-3 sub-layer-2-layer-3 sub-layer-1layer-2layer-13.8 媒體查詢對層排序的影響

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

例如：

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

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

四、現(xiàn)在就能使用級聯(lián)層嗎？4.1 目前瀏覽器支持程度

圖片來源：developer.mozilla.org

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

4.2 W3C 鼓勵可以作為日常使用

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

工作草案( 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 鼓勵從 CR階段的標(biāo)準(zhǔn) 開始可以作為日常使用。

五、總結(jié)

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

css代碼如下：

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

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

效果如下：

級聯(lián)層（CSS@layer）已經(jīng)歷概念提出到到瀏覽器全面支持的階段。也許在不久的將來大家都會普遍使用它，期望本文能給大家?guī)硪欢◣椭?/p>

關(guān)鍵詞：