最近在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 > 标签理解级联算法有助于帮忙咱们了解浏览器是如何解决款式规定抵触，也就是浏览器决定哪个款式规定使用到元素上，更多相干css级联的理解：
何为继承？
当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值 。只有文档根元素取该属性定义的默认值，相似的属性有color、font-size等 。
CSS是由Cascading Style Sheets三个词的首字母缩写，很多人将其称为层叠样式表或者级联样式表.
@layer
CSS Cascade Layers，也叫做CSS级联层，是Cascading and Inheritance Level5 标准中新增了一个新的 CSS 个性，对应的CSS属性写法@layer,即一个新的 @ 规定，也就是大家所说的 at-rule 规定。
为啥会呈现@layer？
通过下面咱们对级联介绍，咱们曾经看到了程序对于层叠的重要性，同权重的css属性后者会“优胜”前者，权重不同会依据CSS申明起源和优先级算法来判断谁“优胜”。!important的CSS规定主动将它跳到层叠算法的后面，可能笼罩一般规定的层叠。
也就是说咱们个别会应用选择器权重和程序作为管制级联的办法，然而这样却会时常碰到：
应用较高权重的选择器来避免你的代码被前面的代码（或他人的代码）笼罩。但这也会引起另一个不良的景象，可能会在代码中新增很多带有 !important 的款式规定，这自身就会引起更多的问题，比方 !important 在 CSS 样式表中随处可见，须要笼罩的时候难以被笼罩 。
应用较低权重的选择器又很容易被前面的代码（或他人的代码）笼罩。比方你在引入第三方代码库或组件时，本人的代码可能被笼罩。
这两个景象也是编写CSS代码，特地是在一个大型项目或多人合作的我的项目中常呈现。也给很多CSS开发者带来很多困扰。
尽管社区有很多第三方计划，如CSS-in-JS、CSS Modules 和 CSS Scoped等来帮助解决级联所带来的问题，但因为源码程序（打包产物）依然起着决定性的作用，程序带来的笼罩和抵触仍旧未真正的解决，而且选择器权重依然比层的程序（源码程序）更重要。
这样的背景促成了@layer的呈现，要真正的解决级联带来的这些问题。
@layer的呈现，也要求咱们对以往css级联有个新的理解,
能够看出CSS的级联层个别位于“Style 属性”（Style Attribute）和 CSS 选择器权重（Specificity）之间。
应用CSS级联层，能够通过@layer at-rule将 CSS 分成多个层。
与 CSS属性起源 在用户样式表和作者样式表格调之间提供衡量的形式雷同，Cascade Layers 提供了一种结构化的形式来组织和衡量单个 起源 内的关注点
如何应用
创立级联层
级联层能够通过多种形式申明：
1、应用@layer 块规定，并立刻为其调配款式：
@layer reset { * { /* Poor Man's Reset */ margin: 0; padding: 0; }}2、应用规定@layer 语句，没有指定任何款式：
@layer reset;3、将@import 与layer关键字或layer()函数一起应用
@import(reset.css) layer(reset);以上每一个都创立了一个名为 的级联层reset。
治理级联层
级联层会按它们申明的程序排序。
在上面的例子中，咱们建设四个级联层：reset，base，theme，和utilities。
@layer reset { /* 创立级联层 “reset” */ * { margin: 0; padding: 0; }}@layer base { /* 创立级联层 “base” */ …}@layer theme { /* 创立级联层 “theme” */ …}@layer utilities { /* 创立级联层 “utilities” */ …}依照它们的申明程序，层程序变为：
reset
base
theme
utilities
重复使用级联层名称时，款式将附加到现有级联层。级联层的程序放弃不变，因为只有第一次的呈现曾经确定程序：
@layer reset { /* 创立第一个级联层 “reset” */ …}@layer base { /* 创立第二个级联层 “base” */ …}@layer theme { /* 创立第三个级联层 “theme” */ …}@layer utilities { /* 创立第四个级联层 “utilities” */ …}@layer base { /* 会将款式增加至级联层“base” */ …}从新应用级联层名称时层程序放弃不变的使@layer 语法变得更加不便和谨严。应用它，能够事后建设图层程序，而后将所有 CSS 附加到它：
@layer reset; /* 创立第一个级联层 “reset” */@layer base; /* 创立第二个级联层 “base” */@layer theme; /* 创立第三个级联层“theme” */@layer utilities; /* 创立第四个级联层 “utilities” */@layer reset { /* 增加款式至级联层 “reset” */ …}@layer theme { /* 增加款式至级联层 “theme” */ …}@layer base { /* 增加款式至级联层 “base” */ …}@layer theme { /* 增加款式至级联层 “theme” */ …}当然你能够用更短的语法来申明级联层，
@layer reset, base, theme, utilities;从下面能够看出，多个级联层被申明时，最初一个级联层的申明会获胜。像这样，
@import(reset.css) layer(reset); /* 第一个级联层 */@layer base { /* 第二个级联层 */ form input { font-size: inherit; }}@layer theme { /*第三个级联层 */ input { font-size: 2rem; }}按以往CSS级联来进行剖析的话，form input（多层级）的优先级会大于input,然而因为级联层所起的作用，@layer theme的input会取胜。
级联层嵌套
级联层反对嵌套应用，如下：
@layer base { /* 第一个级联层*/ p { max-width: 70ch; }}@layer framework { /* 第二个级联层 */ @layer base { /* 第二级联层的嵌套子级联层1 */ p { margin-block: 0.75em; } } @layer theme { /* 第二级联层的嵌套子级联层2 */ p { color: #222; } }}在这个例子中有两个级联外层：
base
framework
该framework层自身也蕴含两层：
base
theme
就像一棵树，像这样，
如果要将款式附加到嵌套级联层，须要应用以下全名来援用它，
@layer framework { @layer default { p { margin-block: 0.75em; } } @layer theme { p { color: #222; } }}@layer framework.theme { /* 这些款式会被增加到@layer framework层外面的theme层 */ blockquote { color: rebeccapurple; }}@media与@layer
@media (min-width: 30em) { @layer layout { .title { font-size: x-large; } }}@media (prefers-color-scheme: dark) { @layer theme { .title { color: white; } }}如果第一个@media (min-width: 30em)匹配（基于视口尺寸），则layout级联层层将在图层程序中排在第一位。如果只有@media (prefers-color-scheme: dark)匹配，theme则将是第一层。
如果两者匹配，则图层程序将为layout, theme。如果没有匹配，则不定义层。
结语
随着 Cascade Layers 的呈现，咱们的开发人员将领有更多的工具来管制 Cascade。Cascade Layers 的真正力量来自它在 Cascade 中的独特地位：Style 属性（Style Attribute）和 CSS 选择器权重（Specificity）之间。因而，咱们不须要放心其余层中应用的 CSS 的选择器特异性，也不须要放心咱们将 CSS 加载到这些层中的程序.
理解到这里，是不是感觉@layer相当地cool，急不可待地想去应用了，咱们看一下caniuse @layer的兼容状况，
很遗憾，反对水平惨不忍睹，想真正应用可能还要再等等，对于明年三月份 Chromium 99,公布咱们刮目相待。
当然当初如果想尝鲜，对于社区也有给出一些方法，
大家也能够试一试，感激浏览！