本文主要讲述了css中的级联层（CSS@layer），讨论了级联以及级联层的创建、嵌套、排序和浏览器支持情况 。级联层可以用于避免样式冲突，提高代码可读性和可维护性 。
文章插图
一、什么是级联层(Cascade Layers)？1.1 级联层的官方定义我们参看Cascading and Inheritance Level 5（13 January 2022） 中6.4节所述：
级联层提供了一种结构化的方式来组织和平衡单个起源中的问题 。单个级联层内的规则级联在一起，不与层外的样式规则交错 。
开发者可以创建层来表现元素默认值、第三方库、主题、组件、覆盖和其他样式问题，并且能够以显式方式重新排序层级，而无需更改每个层内的选择器或特异性，或依赖源顺序来解决跨层的冲突 。
单纯看官方定义和概括可能比较晦涩，下面我们会结合案例来说清楚 。
1.2 级联层为了解决什么问题？简而言之：级联层的出现就是为了使 CSS 开发者可以更简单直接地控制级联 。
我们来假设日常开发中的一个场景，从场景去理解级联层在解决什么问题 。
如下图：
文章插图
我们原来的'display'文案是红色，当我们引入了一个第三方组件库，第三方库中有以下样式 。
/* 开发者样式 */.item {color: red;}/* 第三方库 */#App .item {color: green;border: 5px solid green;font-size: 1.3em;padding: 0.5em;width: 120px;}就会导致'display'文案变成绿色 。我们想要将'display'文案的颜色由绿色改成红色一般的手段是增加选择器特异性（优先级） 。比如在开发页面中对开发者样式进行修改：
/* 开发者样式 */#app div.item {color: red;} /* 第三方库 */#app .item {color: green;border: 5px solid green;font-size: 1.3em;padding: 0.5em;width: 120px;}或者借助级联中出场顺序对优先级的影响在用户页面中重写/* 第三方库 */#app .item {color: green;border: 5px solid green;font-size: 1.3em;padding: 0.5em;width: 120px;} /* 开发者样式 */#app .item {color: red;} 效果如下：
文章插图
再举个例子：
比如有可能第三方组件写了
a { color: blue; }那项目开发中由于引入这个第三方组件 就会导致样式污染，因为第三方库的样式往往都在项目设置的通用样式比如common.css后加载 。如果后面想在代码中覆盖某些属性，使用高特异性选择器的语句就可能会导致问题 。然后因为有问题就会选择更高特异性的择器的语句或使用!important，这会使代码变得冗长也可能会带来副作用 。低特异性选择器的语句很容易被后面出现在代码中的语句覆盖 。在自己的代码之后加载第三方 CSS 时特别会出现这种问题 。
所以级联层就是为了解决以上场景出现的，级联层在级联中的的位置是在内联样式和选择器特异性之间 。当有些css声明就是设置要低优先级且不受选择器特异性影响那么使用级联层再合适不过 。
运用级联层解决第一个日常开发场景痛点的css代码如下：
/* 排序层 */@layer reset, lib;/* 通用样式 */@layer reset {#app .item {color: black;width: 100px;padding: 1em;}}/* 第三方库样式 *//*我们将第三方库的样式全部放到lib层*//*这里一般使用@import导入的方式*//*为了示例简单我们简化了操作*/@layer lib {#app .item {color: green;border: 5px solid green;font-size: 1.3em;width: 130px;}}/* 开发者样式 */.item {color: red;}为了知道为什么上面的css代码能解决冲突问题，更好地理解级联层的作用，理解一些现象背后的根因，了解级联层和级联的关系，我们继续往下看 。二、理解级联层的前提——级联(cascade)2.1 什么是级联？CSS中有两个重要的基础规则，一个是继承，一个是级联 。
继承
指的是类似 color，font-family，font-size，line-height 等属性父元素设置后，子元素会继承的特性 。
级联
可以简单理解为是CSS 用来解决要应用于元素的具体样式的算法 。也就是基于一些优先级排序输出给给定元素上属性值一个级联值 。级联值是级联的结果 。
2.2 当前级联的排序标准我们参看Cascading and Inheritance Level 5（13 January 2022） 中6.1节，
相比于Cascading and Inheritance Level 4（14 January 2016） 中的定义有明显变化 。
最重要的变化就是增加了级联层 。由此级联排序变成：
