CSS @scope：样式作用域与层次控制

---

title: CSS @scope：样式作用域与层次控制

keywords:

• @scope
• 作用域
• 层次控制
• 组件样式
• 兼容策略

description: 使用 @scope 为样式定义作用域与边界，减少全局污染与选择器竞争，适配组件化开发并提供兼容降级方案。

categories:

• 文章资讯
• 编程技术

---

概述

@scope 允许将样式限制在特定根选择器定义的作用域内，并可通过 to() 指定结束边界，提升组件样式的可控性与可维护性。

用法/示例

@scope (.card) {
  .title { font-weight: 600 }
  .btn { padding: 8px 12px }
}

@scope (.menu) to (.menu__footer) {
  .item { color: #111 }
}

工程建议

• 在入口处规划作用域结构与边界，搭配 @layer 与组件根类使用。
• 控制作用域粒度，避免过度嵌套导致复杂度上升。
• 为不支持环境在构建时转译或回退到命名空间类前缀方案。

参考与验证

• MDN：@scope — https://developer.mozilla.org/docs/Web/CSS/@scope
• W3C 草案：Cascade & Inheritance — https://www.w3.org/TR/css-cascade-6/