现有问题
在现有开发过程时，经常会有设置主题、覆盖组件以及第三方库样式等问题。在进行样式重置时，需要提高优先级或者后置样式引入位置达到覆盖原有属性值。 使用优先级更高的选择器覆盖属性，例如：
/* set color red */
div.div-class {
color: red;
}
.div-class {
color: blue;
}
也可以通过后置样式引入，达到样式覆盖。这是因为当优先级相等时，后声明的属性值会被应用到元素上。
通过使用更高优先级的选择器方式，导致选择器越来越长。而后置样式引入时，需要额外的注意引用顺序问题以及打包后引入顺序变化问题。
@layer能够很好的处理样式的覆盖。级联层会降自身优先级降低，且单个级联层内按照原有规则计算优先级，层间不相互影响。
@layer 使用
级联层有以下几种声明方式：
@layer {...}
@layer layer-name {...};
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@import 'xxx.css' layer(layer-name);
@import 'xxx.css' layer;
@layer {...}声明一个匿名的级联层，需要在声明时分配规则，以后无法分配规则；@layer layer-name {...}声明一个具名的级联层，同时分配规则，也可以在后续添加规则；@layer layer-name声明一个具名的级联层，不分配规则；@layer layer-name, layer-name, layer-name声明多个级联层，先后顺序代表了优先级的低到高；@import 'xxx.css' layer(layer-name)给xxx.css添加级联层。当本身存在级联层时，内部级联层会被嵌套在外部层中;@layer可以嵌套使用，优先级比较时，会外层确定，再在层内比较。
@layer 优先级
级联层与不分层样式
当级联层中设置样式时，优先级会降低，级联层外的样式会覆盖级联层中的样式。在组件中可以通过级联层降低优先级，可以让业务中使用时更方便覆盖样式。
/* color: red */
.div-class {
color: red;
}
/* 级联层中 */
@layer layer-name1 {
.div-class {
color: blue;
}
}
级联层间（未声明顺序）
按照声明时的先后顺序，优先级从低到高。越晚声明的级联层优先级越高。
/* color: red */
@layer layer-name1 {
.div-class {
color: red;
}
}
@layer layer-name2 {
.div-class {
color: blue;
}
}
/* or */
@layer layer-name2;
@layer layer-name1;
@layer layer-name1 {
.div-class {
color: red;
}
}
@layer layer-name2 {
.div-class {
color: blue;
}
}
级联层间（指定声明顺序）
可以通过声明多个级联层的方式，指定优先级。先声明的优先级降低。
/* color: red */
@layer layer-name2, layer-name1;
@layer layer-name1 {
.div-class {
color: red;
}
}
@layer layer-name2 {
.div-class {
color: blue;
}
}
存在 !important 情况
- 当级联层中存在
!important时，级联层中样式优先级高于不分层中样式；
/* color: blue */
.div-class {
color: red !important;
}
@layer layer-name1 {
.div-class {
color: blue !important;
}
}
- 当多个级联层中都存在
!important时，先声明的样式优先级更高。这与非!important情况下优先级不同；
/* color: blue */
@layer layer-name1 {
.div-class {
color: blue !important;
}
}
@layer layer-name2 {
.div-class {
color: green !important;
}
}
!important在使用时，会有一些额外的特性。开发中应该避免使用，不然也会出现不可预料以及不可覆盖的样式问题。
兼容性
@layer在现代浏览器中基本都已经支持，可结合情况适时进行使用。参考：caniuse
总结
在业务中引用第三方库以及组件时，需要根据设计稿调整 UI。为了降低覆盖优先级的难度，在组件和第三方库中使用级联层降低自身的优先级，在业务中按照原有选择器也能具有高的优先级。
