首页 › CSS › CSS 架构与现代特性 › 层叠层级 @layer

问题

大型项目中，第三方库、组件、全局样式之间的优先级冲突很难管理。@layer 提供了显式的层级优先级声明。

基本用法

/* 定义层级顺序（优先级从低到高） */
@layer reset, base, components, utilities;

/* 在对应的 layer 中写样式 */
@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: sans-serif; color: #333; }
}

@layer components {
  .card { border: 1px solid #ddd; padding: 16px; }
}

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

层级优先级

后定义的 @layer 优先于先定义的——无论选择器特异性如何：

@layer base, components;

@layer base {
  p { color: red; }       /* 优先级 0（base 层） */
}

@layer components {
  .special { color: blue; }  /* 优先级 1（components 层较高） */
}

/* .special 覆盖 p，但因为层级 priority，即使 p 特异性更高也被覆盖 */

第三方样式隔离

@layer vendor, base, components;

/* 第三方库样式放在 vendor 层，优先级最低 */
@import url('bootstrap.css') layer(vendor);

小结

概念	说明
@layer	显式声明样式层级优先级
后定义优先	同条件下后定义的 layer 覆盖先定义的
应用	隔离第三方样式、管理组件优先级

上一节：BEM 命名方法论 下一节：现代 CSS 新特性

贡献者: 布欧-Lewyon