2022 年最受矚目的新特性 CSS @layer 到底是個啥？

chokcoco發表於2022-03-22

CSS

步入 2022，CSS 的新特性層出不窮，而最近在 CSS 圈最受矚目的新特性，非 CSS @layer 莫屬。

本文，將用最簡潔的語言，快速讓讀者們搞懂，到底什麼是 CSS @layer 新規範。

過往 CSS 優先順序中存在的問題

如果我們的頁面上存在非常多的樣式，譬如有我們開發頁面的時候的自定義樣式，也有引入的元件庫樣式。這時候樣式將會非常混亂難以管理。

當我們想覆蓋一些本身非我們書寫的樣式時候，往往不得不通過使用優先順序權重更高的樣式名，去覆蓋那些樣式。

同時，當樣式優先順序感到難以控制時，開發者習慣濫用 !important 去解決，這又迴圈導致了後續更混亂的樣式結構。

基於讓 CSS 得到更好的控制和管理的背景，CSS @layer 應運而生。

何為 CSS @layer？

CSS @layer 從 CSS Cascading and Inheritance Level 5 被規範定義。

何為 CSS @layer？簡單而言，CSS @規則中的@layer宣告瞭一個級聯層，同一層內的規則將級聯在一起，這給予了開發者對層疊機制的更多控制。

語法也非常簡單，看這樣一個例子：

@layer utilities {
  /* 建立一個名為 utilities 的級聯層 */
}

這樣，我們就建立一個名為 utilities 的 @layer 級聯層。

@layer 級聯層如何使用呢？

通過 @layer 級聯層管理樣式優先順序

@layer 級聯層最大的功能，就是用於控制不同樣式之間的優先順序。

看下面這樣一個例子，我們定義了兩個 @layer 級聯層 A 和 B：

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}

由於 @layer B 的順序排在 @layer A 之後，所以 @layer B 內的所有樣式優先順序都會比 @layer A 高，最終 div 的顏色為 green：

當然，如果頁面內的 @layer 太多，可能不太好記住所有 @layer 的順序，因此，還有這樣一種寫法。

我們可以同時命名多個 @layer 層，其後再補充其中的樣式規則。

<div></div>

@layer B, C, A;
div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}

上述程式碼，我們首先定義了 @layer B, C, A 三個 @layer 級聯層。而後再後面的 CSS 程式碼中補充了每個級聯層的 CSS 程式碼，但是樣式的優先順序為：

A > C > B

因此，最終的 div 的顏色值為 @layer A 中定義的顏色，為 blue：

到這裡，CSS @layer 的作用可以清晰的被窺見。

利用 CSS @layer，我們可以將 CSS 不同模組劃入不同的 @layer 中，利用先後順序，非常好的去控制全域性的樣式優先順序。

@layer 級聯層的三種定義引入方式

上面其實提到了兩種 @layer 級聯層的定義引入方式，這裡再描述下，一共有 3 中引入 CSS @layer 級聯層的方式。

直接建立一個塊級的 @layer 規則，其中包含作用於該層內部的CSS規則：

@layer utilities {
  p {
    padding: .5rem;
  }
}

一個級聯層可以通過 @import 來建立，規則存在於被引入的樣式表內：

@import(utilities.css) layer(utilities);

建立帶命名的級聯層，但不指定任何樣式。樣式隨後可在 CSS 內任意位置新增：

@layer utilities;
// ...
// ...
@layer utilities {
    p {
        color: red;
    }
}

非 @layer 包裹層與 @layer 層內樣式優先順序

當然，這裡還會有一種情況，沒有被 @layer 包裹的樣式，它的優先順序和被 @layer 包裹的樣式相比，又會如何呢？

看這樣一個例子：

@layer A { a { color: red; } }
@layer B { a { color: orange; } }
@layer C { a { color: yellow; } }
a { color: green; } /* 未被 @layer 包裹的樣式 */

這裡會有一個非常重要的結論，非 @layer 包裹的樣式，擁有比 @layer 包裹樣式更高的優先順序，因此，上述規則的排序是：

未被 @layer 包裹的樣式 > @layer C > @layer B > @layer A

匿名層與巢狀層

還有兩種層級關係，分別是匿名層和巢狀層。

匿名層

允許建立一個不帶名字的 @layer：

@layer {
  p {
    margin: 1rem;
  }
}

這裡，建立了一個匿名層。匿名層的兩個重要特性：

建立後無法向其再新增規則
該層和其他命名層功能一致，優先順序也遵循後定義的匿名層，比其他已定義的 @layer 層，優先順序更高

看一個例子：

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer {
    div {
        background: pink;
    }
}
@layer B, C, A;
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}

上述程式碼，我們首先定義了一個匿名層，指定了 div 的顏色為 pink，而後又定義了 @layer B, C, A。這裡優先順序順序為：

A > C > B > 匿名層

最終的顏色為 @layer A 內的顏色值 -- blue：

如果，我們將匿名層放在最後的話：

div {
    width: 200px;
    height: 200px;
}
@layer B, C, A;
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}
@layer {
    div {
        background: pink;
    }
}

此時，樣式的優先順序順序為：

匿名層 > A > C > B

最終的顏色為匿名層內的顏色值 -- pink：

巢狀層

說完了匿名層，我們再來看看巢狀層。

顧名思義，巢狀層的意思就是在 @layer 內部，我們可以再巢狀使用 @layer 級聯層。像是這樣：

@layer A {
  @layer B{
    ...
  }
}

當然，它還有另外一種語法，上述程式碼等價於：

@layer A.B {
  ...
}

瞭解了這個後，那麼，看這樣一個例子：

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
    
    @layer B {
        div {
            background: red;
        }
    }
}

我們在 @layer A 中巢狀一個 @layer B，同時都定義了一個 div 的樣式，最終 div 的 background 到底是什麼顏色呢？

最終為藍色 background: blue，為什麼呢？這個很好記憶，我們假設如果沒有 @layer A 這一層包裹，其實就是上述說的 @layer 層與非 @layer 層的優先順序比較，這裡，非 @layer 層（我們可以理解為更高階別的一層 @layer）的優先順序更高。

因此，對於單個 @layer 內的巢狀關係，樣式優先順序為：

@layer A > @layer A.B

多層巢狀層的優先順序關係

OK，再看這樣一種情況：

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red;
        }
    }
}
@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green;
        }
    }
}

這裡存在同時存在多個巢狀 @layer 的情況。那麼這種情況優先順序又是如何劃分呢？

這裡的規則是，優先順序高的 @layer，無論是否存在巢狀，優先順序都整體比優先順序低的 @layer（無論是否存在巢狀）高，因此，這裡的優先順序排序是：

@layer C > @layer C.D > @layer A > @layer A.B

!important 對 CSS @layer 的影響

再來看看 !important 對 CSS @layer 的影響。

這裡可以分為幾種情況，先看其中一種：

<div></div>

div {
    width: 200px;
    height: 200px;
    background: black;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red;
        }
    }
}
@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green!important;
        }
    }
}

上述程式碼，我們給 @layer C.D 的 <div> 新增了一個 !important 規則。

如果，不考慮 !important 規則，那麼實際的 CSS 優先順序為（序號越高，優先順序越高）：

@layer A.B
@layer A
@layer C.D
@layer C
非 layer 包裹塊

那麼，<div> 的顏色應該為黑色 black。然而，這裡給 @layer C.D 的 <div> 新增了一個 !important 規則。

實際上，最終 <div> 的顏色為 green，也就是最終的優先順序排序為（序號越高，優先順序越高）：

@layer A.B
@layer A
@layer C
非 layer 包裹塊
!important 下的 @layer C.D

也就是說，這裡 !important 規則的優先順序還是凌駕於非 !important 規則之上的。

上述 DEMO 還是比較有意思的，感興趣的可以看看：CodePen Demo -- CSS Cascade @layer Demo

非 @layer 包含塊 !important 與 @layer 包含塊 !important

到這裡，你也許會以為你懂了。好，我們再來看一個 DEMO，如果我們給非 @layer 包含塊，也加上一個 !important 規則，事情就變得有趣了。

<div></div>

div {
    width: 200px;
    height: 200px;
    background: black!important;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red;
        }
    }
}
@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green!important;
        }
    }
}

仔細看上述程式碼，非 @layer 包含塊，我們也加上了一個 !important 規則，按照上述我能描述的規則來看，非 @layer 包含塊的優先順序高於 @layer 包含塊，那麼正常而言，我們不難猜測，這裡 background: black!important 的優先順序應該要比 background: green!important 高，最終 <div> 應該展示黑色。

而實際上，這裡最終 <div> 的顏色還是 green。這裡就又有一個非常有意思的知識點了，!important 下樣式優先順序的規則與非 !important 正常狀態下剛好相反。

這是一個非常重要的特性，在比較正常（非 !important）規則時，越是級聯（排序較後的 @layer 規則），優先順序越低；反之，在比較 !important 規則時，越是級聯靠後的（排序較後的 @layer 規則），優先順序越高。

這個，更進一步的話，我們需要去了解 CSS Cascading 相關的知識了。

CSS Cascade 規範

在 CSS @layer 之前，我們簡單看一張圖：

上圖表面的是在沒有 CSS @layer 之前，CSS 樣式申明的優先順序排序，根據 CSS Cascading 4(Current Work) 標準，定義的當前規範下申明的層疊順序優先順序如下（越往下的優先順序越高，下面的規則按升序排列）：

Normal user agent declarations
Normal user declarations
Normal author declarations
Animation declarations
Important author declarations
Important user declarations
Important user agent declarations
Transition declarations

按照上述演算法，可以得到一個樣式優先順序的排序，大概是這樣（越往下的優先順序越高，下面的規則按升序排列）：

User Agent - 使用者代理普通樣式
User - 使用者設定的普通樣式
Author - 頁面作者普通樣式
Animations - 動畫樣式
❗️Author - 頁面作者 !important 樣式
❗️User - 使用者設定的 !important 樣式
❗️User Agent - 使用者代理的 !important 樣式
Transitions - 過渡樣式

簡單解釋一下：
使用者代理樣式：瀏覽器會有一個基本的樣式表來給任何網頁設定預設樣式。這些樣式統稱使用者代理樣式
頁面作者樣式：網頁的作者可以定義文件的樣式，這是最常見的樣式表。大多數情況下此型別樣式表會定義多個，它們構成網站的視覺和體驗，即頁面主題，可以理解為頁面作者樣式
使用者樣式：讀者，作為瀏覽器的使用者，可以使用自定義樣式表定製使用體驗，自定義使用者偏好，可以理解為使用者樣式

關於 CSS Cascading，也就是層疊規範，你可以看看我的這篇文章加深理解 -- 深入理解 CSS（Cascading Style Sheets）中的層疊（Cascading）。

而當有了 CSS @layer 之後，這個層疊優先順序順序有了更新，具體優先順序如下：

整體會變更為複雜一些，但是總體還是遵循了兩個規則：

!important 樣式高於非 !important 樣式
在比較 !important 規則時，優先順序順序與正常規則相反，在正常狀態下優先順序越低的，在 !important 下優先順序越高

總結一下

綜上，便是關於 CSS @layer 的基礎相關知識。

CSS @layer 的誕生，讓我們有能力更好的劃分頁面的樣式層級，更好的處理內部樣式與外部引用樣式的優先順序順序，屬於比較重大的一次革新。

同時，它也讓我們意識到要逐漸摒棄大規模使用 !important 去覆蓋樣式優先順序的錯誤做法，避免許多因為優先順序問題帶來的不必要的副作用。

當然，時至今天（2022-03-14），我們來看一眼相容性：

雖然紅了一大片，但是，在最新版的 Chrome、Safari、Firefox、Edge 都已經開始支援 CSS @layer，並且，目前已經可以通過一些 polyfill 初步使用它，相信在不久的將來，它將會成為業務 CSS 程式碼中必不可少的一部分。

最後

好了，本文到此結束，希望對你有幫助 ?

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

盤點：業界最受矚目的802.11ax無線產品
2018-05-07
2022年你不知道的CSS新特性
2022-06-01
CSS
Webhook到底是個啥？
2018-12-02
WebHook
resnet到底是個啥
2019-02-20
socket 到底是個啥
2023-04-13
[譯] Flutter 元件到底是個啥？
2018-07-12
Flutter元件
Java築基 - JNI到底是個啥
2021-05-11
Java
2022年的新CSS功能 — Smashing
2022-03-04
CSS
css3 新特性
2018-09-12
CSSS3
CSS3新特性
2024-08-06
CSSS3
盤點：2018年網路領域最引人矚目的10大收購
2018-08-02
Java中的反射到底是個啥？
2020-10-08
Java反射
【Flutter脫髮錄】RenderObject到底是個啥？
2020-04-12
FlutterObject
掃盲貼：2021 CSS 最冷門特性都是些啥？
2022-02-24
CSS
AI領域未來幾年最引人矚目的新方向是什麼？
2018-11-14
AI
ES2022新特性
2024-04-07
css3新特性總結
2019-02-17
CSSS3
一文帶你搞懂 RPC 到底是個啥
2021-05-31
RPC
這場備受矚目的CSR論壇，如何解讀網際網路行業社會創新？
2024-07-26
行業
2018年曼谷成最受歡迎亞洲旅遊目的地城市
2019-11-10
全球十大最受歡迎的度假目的地你去了幾個？
2024-07-16
ECMA 2022 (es13) 新特性
2021-10-12
Agoda：2020年全球旅遊新趨勢京都將成為最受中國旅客歡迎的目的地
2020-01-03
Go
你常常看到的 __init__.py 到底是個啥？
2020-10-29
計算機中的流水線技術到底是個啥？
2021-02-09
計算機
前端技術面——（CSS3新特性）
2018-10-05
前端CSSS3
H5-30 CSS3 新特性
2024-12-05
H5CSSS3
2022 最受歡迎的 CSS 偽類、偽元素分別是什麼
2023-01-08
CSS
遠矚諮詢：2022年中國電力行業分析（附下載）
2023-02-18
行業
CSS三個非常重要的特性分享！
2021-08-31
CSS
下一個時代的發展架構竟然是它！FaaaaaaaaS到底是個啥？
2018-08-28
架構
資料分析師到底是幹啥的？
2023-12-01
[PHP 原始碼] EXPECTED 和 UNEXPECTED 到底是啥？
2020-04-06
PHP原始碼
CSS3 和 HTML5 新特性一覽
2019-04-24
CSSS3HTML
CSS新特性contain，控制頁面的重繪與重排
2021-05-06
CSSAI
啥啥啥，服務治理是個啥
2021-02-01
分享div css佈局案例的目的
2018-08-06
CSS
.NET 9 的幾個新特性，新穎嗎？
2024-05-07