"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/@scopeCSS 规范草案：https://www.w3.org/TR/css-cascade-6/#scope-atruleChrome 平台文档：https://developer.chrome.com/docs/web-platform/css-scope/