CSS 代码组织：@layer 与 @scope 协同实践

概述

@layer 定义样式层与顺序；@scope 限定作用域边界。二者协作可在大型项目中明确覆盖关系并控制样式影响范围。

用法/示例

@layer base, components, theme;
@scope (.card) {
  @layer components { .btn { padding: 8px 12px } }
}
@layer theme { .btn { background: #4f46e5; color: #fff } }

工程建议

• 在入口集中声明层顺序；在组件内部使用 @scope 控制影响边界。
• 对第三方样式设独立层并限制覆盖范围；减少 !important 使用。
• 配合构建工具生成层与作用域地图，辅助审查与重构。

参考与验证

• MDN：@layer — https://developer.mozilla.org/docs/Web/CSS/@layer
• MDN：@scope — https://developer.mozilla.org/docs/Web/CSS/@scope