2022 CSS新特性 @layer 介绍

1. 前置知识
• at-rule 规则
• Cascading and Inheritance Level
• 何为级联（层叠）？
• css 属性一般来自于哪几个源？
• 层叠（级联）算法如何过滤来自不同源的 css 规则？
• 过滤来自不同源的 css 规则后，确定同源优先级高低，决定谁“优胜”
• 何为继承？
2. 过往 CSS 优先级中存在的问题
3. @layer
4. 通过 @layer 级联层管理样式优先级
5. @layer 级联层的三种定义引入方式
• 非 @layer 包裹层与 @layer 层内样式优先级
6. 匿名层与嵌套层
• 匿名层
• 嵌套层
• 多层嵌套层的优先级关系
7. !important 对 CSS @layer 的影响
• 非 @layer 包含块 !important 与 @layer 包含块 !important
8. CSS Cascade 规范
9. 总结一下

最近在Weekly邮件推送中查阅到这样的一条信息：

Chromium 团队宣布他们将随 Chromium 99（预计在明年 3 月发布）一起发布 CSS Cascade Layers

会发现这条信息里面出现了一个 CSS 的新名词CSS Cascade Layers，出于好奇以及对新知识的渴望（说得我自己都信了，哈哈），于是查阅起CSS Cascade Layers的相关资料，试图搞懂它。

前置知识

at-rule 规则

at-rule规则， CSS Conditional Rules Module Level 3新增的规则，是一条语句，它为 CSS 提供了执行或如何执行的指令，常见的at-rule规则有：

• @import，允许用户从其他样式表导入样式规则
• @font-face，允许我们引用自定义的字体
• @keyframes，声明一个动画
• @media，是条件 CSS 中的一种，其条件是一个媒体查询
• @supports，测试用户代理是否支持 CSS 属性/值对
• @viewport，用来控制移动设备上的 viewport 设置

Cascading and Inheritance Level

级联(层叠)与继承经过多年的发展迭代，目前已有多个版本（CSS2.2、Level3、Level4 和 Level5）。

何为级联（层叠）？

层叠本质就是定义了如何合并来自多个源的属性值的算法，简单来说，CSS 规则的顺序很重要。当两条同级别的规则应用到一个元素的时候，写在后面的就是实际使用的规则。

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}

两条规则优先级相同，所以顺序在最后的生效，h1是color:blue‘胜出’，显示蓝色。

只有 CSS 声明，就是属性名值对，会参与层叠计算。这表示包含 CSS 声明以外实体的@规则不参与层叠计算，如包含描述符的@font-face，@规则（at-rule 规则）是做为一个整体参与层叠计算。

css 属性一般来自于哪几个源？

1. 用户代理样式表：浏览器的基本的样式表，用于给所有网页设置默认样式。
2. 用户样式表：网页的作者可以定义文档的样式。大多数情况下此类型样式表会定义网站的主题。
3. 浏览器的用户使用自定义样式表定制使用体验。

层叠（级联）算法如何过滤来自不同源的 css 规则？

相互冲突的声明按以下顺序适用，后一种声明将覆盖前一种声明：

1. 用户代理样式表中的声明(浏览器的默认样式)；
2. 用户样式表中的常规声明(用户设置的自定义样式，就如同我们的reset.css)；
3. 作者样式表中的常规声明(开发人员设置的样式)；
4. 作者样式表中的!important声明；
5. 用户样式表中的!important声明。

过滤来自不同源的 css 规则后，确定同源优先级高低，决定谁“优胜”

!important > 内联 style > #id > .class > 标签

了解级联算法有助于帮助我们理解浏览器是如何解决样式规则冲突，也就是浏览器决定哪个样式规则运用到元素上。

何为继承？

当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值 。只有文档根元素取该属性定义的默认值，类似的属性有color、font-size等 。

CSS 是由Cascading Style Sheets三个词的首字母缩写，很多人将其称为层叠样式表或者级联样式表。

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

如果我们的页面上存在非常多的样式，譬如有我们开发页面的时候的自定义样式，也有引入的组件库样式。这时候样式将会非常混乱难以管理。

当我们想覆盖一些本身非我们书写的样式时候，往往不得不通过使用优先级权重更高的样式名，去覆盖那些样式。

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

基于让 CSS 得到更好的控制和管理的背景，CSS @layer 应运而生。

@layer

CSS Cascade Layers，也叫做CSS 级联层，是Cascading and Inheritance Level5 规范中新增了一个新的 CSS 特性，对应的 CSS 属性写法@layer，即一个新的 @ 规则，也就是大家所说的at-rule 规则。

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

@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：

虽然红了一大片，但是，在最新版的 Chrome、Safari、Firefox、Edge 都已经开始支持 CSS @layer，并且，目前已经可以通过一些 polyfill 初步使用它，相信在不久的将来，它将会成为业务 CSS 代码中必不可少的一部分。