关于前端:2022-年最受瞩目的新特性-CSS-layer-到底是个啥

步入 2022，CSS 的新个性层出不穷，而最近在 CSS 圈最受注目的新个性，非 CSS @layer 莫属。

本文，将用最简洁的语言，疾速让读者们搞懂，到底什么是 CSS @layer 新标准。

如果咱们的页面上存在十分多的款式，譬如有咱们开发页面的时候的自定义款式，也有引入的组件库款式。这时候款式将会十分凌乱难以治理。

当咱们想笼罩一些自身非咱们书写的款式时候，往往不得不通过应用优先级权重更高的款式名，去笼罩那些款式。

同时，当款式优先级感到难以管制时，开发者习惯滥用 !important 去解决，这又循环导致了后续更凌乱的款式构造。

基于让 CSS 失去更好的管制和治理的背景，CSS @layer 应运而生。

CSS @layer 从 CSS Cascading and Inheritance Level 5 被标准定义。

何为 CSS @layer？简略而言，CSS @规定中的 @layer 申明了一个级联层，同一层内的规定将级联在一起，这给予了开发者对层叠机制的更多管制。

语法也非常简单，看这样一个例子：

@layer utilities {/* 创立一个名为 utilities 的级联层 */}

这样，咱们就创立一个名为 utilities 的 @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 级联层的定义引入形式，这里再形容下，一共有 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 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 的影响。

这里能够分为几种状况，先看其中一种：

<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

到这里，你兴许会认为你懂了。好，咱们再来看一个 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 @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 @layer 曾经有十分多的探讨，这里列举一些优质文章，感兴趣的能够持续浏览：

Cascade Layers Explainer
Getting Started With CSS Cascade Layers
文章内局部截图援用于 How does !important actually work? (It’s not what you think!)

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

关于前端:2022-年最受瞩目的新特性-CSS-layer-到底是个啥

过往 CSS 优先级中存在的问题

何为 CSS @layer？

通过 @layer 级联层治理款式优先级

@layer 级联层的三种定义引入形式

非 @layer 包裹层与 @layer 层内款式优先级

匿名层与嵌套层

匿名层

嵌套层

多层嵌套层的优先级关系

!important 对 CSS @layer 的影响

非 @layer 蕴含块 !important 与 @layer 蕴含块 !important

CSS Cascade 标准

总结一下

延长浏览

最初