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

## 概述 `@layer` 定义样式层与顺序；`@scope` 限定作用域边界。二者协作可在大型项目中明确覆盖关系并控制样式影响范围。 ## 用法/示例 ```css @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