@layer CSS其实没啥用

@layer CSS其实没啥用

因为@layer 定义包裹的图层的权重低于普通不包裹的css的权重，然后业务开发中，大家很少去用@layer包裹自己的代码，很多组件库也没有使用@layer包裹自己的代码，你就没法覆盖组件库样式， 至于用它样式分包，没有什么必要，完全可以使用css嵌套加上，css条件语句and，or not等，进行架构分包更好用。

基本语法示例：

/* 声明层的顺序 */
@layer base, components, utilities;

/* 在特定层中定义样式 */
@layer base {
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
}

@layer components {
  .button {
    background: blue;
    color: white;
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }
}

关键特点：

1. 层级优先级：

• 后声明的层级优先级更高
• 同一层内的样式遵循普通的 CSS 特异性规则
• 未分配给任何层的样式优先级最高

2. 嵌套层：

@layer framework {
  @layer layout {
    /* 可以创建嵌套的层级 */
  }
}

3. 导入时使用：

@import url(theme.css) layer(theme);

需要注意的是，@layer 是一个相对较新的特性，在使用时需要注意浏览器兼容性。目前主流现代浏览器都已支持此特性。