@layer

css中的@layer声明了一个 级联层， 开发者可以控制级联规则，可以对级联进行排序。
有了此功能，对于组件或者模块的CSS，可以全部写在@layer的规则中，把自身的优先级降到底部，这样对于引入的UI库和组件库的样式，我们可以很轻松的再次定制和覆盖他的样式，而不必考虑烦人的优先级。

@layer common,base,reset;
@layer common{
  button {
    color:blue;
  }
}
@layer base{
  button {
    color:red;
  }    
}

上面的button的颜色应该是red；
这三个layer的优先级从低到高依次为：common> base > reset，common组件的样式优先级最低，这样方便我们在项目中对样式的一个控制。

兼容性

image.png