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

概述 `@scope` 允许为选择器定义作用域起点与限制，作用域内的样式仅影响该子树，可替代部分 BEM/命名约定，提升组件化与可维护性。 示例 ```css @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/