"CSS @scope：作用域样式与冲突隔离"

概述

`@scope` 允许为选择器定义作用域起点与限制，作用域内的样式仅影响该子树，可替代部分 BEM/命名约定，提升组件化与可维护性。

示例

@scope (.card) {
  .title { font-weight: 600 }
  :scope .content { color: #333 }
}

@scope (.dialog) to (.dialog__footer) {
  button { margin: 0 8px }
}

工程建议

• 边界控制：使用 `:scope` 引用作用域根；按需使用 `to()` 限定结束节点。
• 与层级：结合 `@layer` 管理全局与局部层叠顺序；避免深层选择器。
• 兼容：不支持时回退到命名约定与 Shadow DOM；逐步迁移。

参考与验证

• MDN `@scope` 文档：https://developer.mozilla.org/docs/Web/CSS/@scope
• CSS 规范草案：https://www.w3.org/TR/css-cascade-6/#scope-atrule
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/css-scope/