1. 引言
简述传统 CSS 优先级困境及 @layer 的引入意义。
2. @layer 基础语法
2.1 语法形式
- 命名并定义层：
@layer name { … } - 仅声明层顺序：
@layer name; - 一次声明多个层：
@layer a, b, c; - 匿名层：
@layer { … }
2.2 层声明与分组
- 浏览器按首次出现顺序创建层，再根据后续声明调整优先级。
- 同层内仍遵循选择器特异性和源代码顺序。
3. 优先级机制
3.1 四个维度
- Ω 轴：匿名层（未分层规则）
- Z 轴：命名层声明顺序
- Y 轴：选择器特异性（ID > 类 > 标签）
- X 轴：源代码出现顺序
3.2 !important 与层叠
- 带
!important的规则在相反层叠顺序中比较层级。 - 内联样式仍最高。
4. 使用示例
4.1 基础分层
@layer reset, base, components, utilities;
@layer reset { /* 重置 */ }
@layer base { /* 基础 */ }
@layer components { /* 组件 */ }
@layer utilities { /* 工具 */ }
各层声明顺序决定覆盖优先级。
4.2 匿名层覆盖
h1 { color: red; } /* 匿名层 */
@layer components { h1 { color: blue; } }
最终呈现红色。
4.3 嵌套层
@layer outer {
button { width:100px; }
@layer inner { button { height:30px; } }
}
inner 优先于 outer。
4.4 与 @import 配合
@import url("reset.css") layer(reset);
@import url("lib.css") layer(vendor);
@layer base { … }
引入样式按指定层级处理。
5. 最佳实践
5.1 全量分层管理
将所有规则纳入层声明，避免匿名层隐式覆盖。
5.2 预先声明层顺序
在主入口中一次性列出所有层，确保顺序可控。
5.3 模块化分层
对第三方库、基础规则、组件和工具类分别设层。
5.4 谨慎使用 !important
优先用层级与特异性解决覆盖，再才考虑 !important。
5.5 嵌套与重命名
通过 @layer a.b 等语法表达更细粒度的层级关系。
6. 结语
CSS @layer 为样式优先级管理带来声明式分组思路。掌握其语法、优先级与配套技巧，能让大型项目样式更可预测、可维护。
