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

---

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

keywords:

• @scope
• 作用域样式
• 层叠隔离
• 组件化

description: "介绍 CSS @scope 的语法与作用域边界，避免全局选择器污染，实现组件级样式隔离与更可控的层叠，提供示例与兼容策略。"

categories:

• 文章资讯
• 编程技术

---

概述

@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/