层叠层与作用域
@layer 把样式分成有顺序的层，先声明层顺序就能让 reset、组件和覆盖规则拥有稳定关系，减少不断增加选择器特异性的需要。
css
@layer reset, components, utilities;
@layer reset { *, *::before, *::after { box-sizing: border-box; } }
@layer components { .card { color: black; } }
@layer utilities { .muted { color: gray; } }层顺序、来源、重要性和特异性共同决定结果；后层的低特异性规则可以胜过前层的高特异性规则。@scope 可以限制规则作用范围，但作用域不是 Shadow DOM，也不会自动隔离所有脚本和资源。
实验与练习
把一套样式拆成 reset、components 和 utilities 三层，故意让组件选择器比工具类更复杂，观察层顺序如何决定颜色。移动层声明顺序后重新记录结果，并说明为什么不需要增加 ID。
可运行微实验：能力检测与降级
先用 @supports 检测容器查询、cascade layers 或逻辑属性，再在支持与不支持路径提供同一内容的可用布局。用不同语言方向和不同容器宽度测试，记录哪些样式来自现代能力、哪些来自基础 CSS。
常见错误
- 层声明顺序与文件加载顺序混淆。
- 认为
@layer会隔离 DOM、事件或 JavaScript。 - 把所有覆盖都放在 utilities，导致组件契约失去边界。
继续阅读
下一篇用 min()、max() 和 clamp() 进行受约束计算：计算函数。
练习
- 用最小输入复现“层叠层与作用域”的成功路径，并记录可观察结果。
- 改变一个时序、数据或宿主条件，解释结果为何变化。
- 删除清理、校验或降级分支，写出能证明缺陷的断言。