一文了解CSS3中的新特性@layer

這篇文章帶大家一起深入了解CSS3中的新特性@layer，希望對大家有幫助！

步入 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 級聯層的方式。

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

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

2、一個級聯層可以透過@import

來創建，規則存在於被引入的樣式表內：

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

3、創建帶有命名的級聯層，但不指定任何樣式。樣式隨後可在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> 添加了一个 <code>!important 规则。

如果，不考虑 !important 规则，那么实际的 CSS 优先级为（序号越高，优先级越高）：

• @layer A.B

• @layer A

• @layer C.D

• @layer C

• 非 layer 包裹块

那么，<div> 的颜色应该为黑色 <code>black。然而，这里给 @layer C.D 的 <div> 添加了一个 <code>!important 规则。

实际上，最终 <div> 的颜色为 <code>green，也就是最终的优先级排序为（序号越高，优先级越高）：

• @layer A.B

• @layer A

• @layer C

• 非 layer 包裹块

• !important 下的 @layer C.D

也就是说，这里 !important 规则的优先级还是凌驾于非 !important 规则之上的。

上述 DEMO 还是比较有意思的，感兴趣的可以看看：CodePen Demo -- CSS Cascade @layer Demo

https://codepen.io/Chokcoco/pen/KKZKBRr

非 @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> 应该展示黑色。<p>而实际上，这里最终 <code><div> 的颜色还是 <code>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）。

https://github.com/chokcoco/iCSS/issues/76

而当有了 CSS @layer 之后，这个层叠优先级顺序有了更新，具体优先级如下：

整体会变更为复杂一些，但是总体还是遵循了两个规则：

• !important 样式高于非 !important 样式

• 在比较 !important 规则时，优先级顺序与正常规则相反，在正常状态下优先级越低的，在 !important 下优先级越高

总结一下

综上，便是关于 CSS @layer 的基础相关知识。

CSS @layer 的诞生，让我们有能力更好的划分页面的样式层级，更好的处理内部样式与外部引用样式的优先级顺序，属于比较重大的一次革新。

同时，它也让我们意识到要逐渐摒弃大规模使用 !important 去覆盖样式优先级的错误做法，避免许多因为优先级问题带来的不必要的副作用。

当然，时至今天（2022-03-14），我们来看一眼兼容性：

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

延伸閱讀

外網對CSS @layer 已經有非常多的討論，這裡羅列一些優質文章，感興趣的可以繼續閱讀：

• Cascade Layers Explainer
• Getting Started With CSS Cascade Layers
• 文章內部分截圖引用於How does !important actually work? (It's not what you think!)

最後

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

（學習影片分享：web前端）