CSS @scope 深度实战：原生样式隔离终于来了，BEM 可以退休了

1.1 最简形式#

1
@scope (.card) {
2
  .title {
3
    font-size: 1.5rem;
4
    font-weight: bold;
5
    color: #333;
6
  }
7

8
  .content {
9
    line-height: 1.8;
10
    color: #666;
11
  }
12
}

这段代码的含义是：.title 和 .content 只在 .card 元素内部生效。

对应的 HTML：

1
<div class="card">
2
  <h2 class="title">这个标题会被样式命中 ✅</h2>
3
  <p class="content">这段内容也会被样式命中 ✅</p>
4
</div>
5

6
<h2 class="title">这个标题不受影响 ❌</h2>

看起来和 .card .title 的后代选择器一样？不一样。 后面会讲到关键区别。

1.2 设定下界：to 关键字#

@scope 最强大的能力是设定作用域的下界（lower boundary），也就是「到哪里为止」：

1
@scope (.card) to (.card-footer) {
2
  .title {
3
    color: #1a1a1a;
4
  }
5

6
  p {
7
    font-size: 0.95rem;
8
  }
9
}

这意味着：样式只作用于 .card 内部、但 不包括 .card-footer 及其子元素。

1
<div class="card">
2
  <h2 class="title">会被命中 ✅</h2>
3
  <p>会被命中 ✅</p>
4

5
  <div class="card-footer">
6
    <h2 class="title">不会被命中 ❌</h2>
7
    <p>不会被命中 ❌</p>
8
  </div>
9
</div>

这才是 @scope 的杀手级特性。 后代选择器做不到这一点——你无法用纯 CSS 说「匹配子元素但不匹配某个嵌套区域内的子元素」。以前只能靠 JS 或复杂的选择器 hack。

1.3 :scope 伪类#

在 @scope 块内部，可以用 :scope 引用作用域根元素本身：

1
@scope (.card) {
2
  :scope {
3
    border: 1px solid #e0e0e0;
4
    border-radius: 12px;
5
    padding: 1.5rem;
6
    background: #fff;
7
  }
8

9
  .title {
10
    margin-top: 0;
11
  }
12
}

:scope 就是 .card 本身。这样你可以把组件的所有样式都写在一个 @scope 块里，从根元素到子元素，结构非常清晰。

2.1 优先级不同#

后代选择器会增加选择器的特异性（specificity）。.card .title 的特异性是 (0, 2, 0)，比单独的 .title (0, 1, 0) 高。

而 @scope 不增加特异性。 @scope (.card) { .title { ... } } 中，.title 的特异性仍然是 (0, 1, 0)。

这意味着什么？意味着你不会陷入「特异性军备竞赛」。用后代选择器做作用域隔离，最后你会写出 .page .section .card .title 这种四层嵌套的选择器，特异性越来越高，覆盖起来越来越痛苦。

2.2 就近原则（Proximity）#

当两个 @scope 都能匹配同一个元素时，CSS 会优先使用距离更近的那个作用域的样式：

1
@scope (.light-theme) {
2
  .btn { background: #f0f0f0; color: #333; }
3
}
4

5
@scope (.dark-theme) {
6
  .btn { background: #333; color: #f0f0f0; }
7
}

1
<div class="light-theme">
2
  <div class="dark-theme">
3
    <button class="btn">我是深色按钮 ✅</button>
4
  </div>
5
</div>

即使 .light-theme 在 DOM 中层级更高，但 .dark-theme 离 .btn 更近，所以深色主题的样式生效。

这在以前是做不到的。 后代选择器只看特异性和源码顺序，不看「谁离得更近」。而 @scope 引入了「就近原则」，这对主题切换、嵌套组件场景来说简直是救星。

2.3 下界隔离#

前面已经说过，to 关键字可以设定下界。后代选择器没有这个能力。这在组件嵌套时特别有用：

1
/* 外层 card 的样式不会泄漏到内层嵌套的 card */
2
@scope (.card) to (.card) {
3
  .title { color: #1a1a1a; }
4
  p { color: #555; }
5
}

1
<div class="card">
2
  <h2 class="title">外层标题，被命中 ✅</h2>
3

4
  <div class="card">
5
    <h2 class="title">内层标题，不被外层 @scope 命中 ❌</h2>
6
    <!-- 但会被自己的 @scope 命中 ✅ -->
7
  </div>
8
</div>

同名组件嵌套时，每一层只管自己那一层的样式。这才是真正的组件级样式隔离。

3.1 组件样式封装#

最直接的用法——把每个组件的样式用 @scope 包起来：

1
@scope (.user-card) {
2
  :scope {
3
    display: flex;
4
    align-items: center;
5
    gap: 1rem;
6
    padding: 1rem;
7
    border: 1px solid #eee;
8
    border-radius: 8px;
9
    transition: box-shadow 0.2s;
10
  }
11

12
  :scope:hover {
13
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
14
  }
15

16
  .avatar {
17
    width: 48px;
18
    height: 48px;
19
    border-radius: 50%;
20
    object-fit: cover;
21
  }
22

23
  .name {
24
    font-weight: 600;
25
    font-size: 1rem;
26
  }
27

28
  .role {
29
    font-size: 0.85rem;
30
    color: #888;
31
  }
32
}

不需要 BEM 的 .user-card__avatar，不需要 CSS Modules 的哈希类名。 就是普通的 .avatar、.name、.role，简洁直观，而且保证不会污染外部。

3.2 主题系统#

@scope 的就近原则天然适合做主题切换：

1
@scope ([data-theme="light"]) {
2
  :scope {
3
    --bg-primary: #ffffff;
4
    --text-primary: #1a1a1a;
5
    --text-secondary: #666666;
6
    --border-color: #e5e5e5;
7
    --accent: #3b82f6;
8
  }
9
}
10

11
@scope ([data-theme="dark"]) {
12
  :scope {
13
    --bg-primary: #1a1a1a;
14
    --text-primary: #e5e5e5;
15
    --text-secondary: #999999;
16
    --border-color: #333333;
17
    --accent: #60a5fa;
18
  }
19
}
20

21
/* 组件直接使用变量，不需要关心当前是什么主题 */
22
@scope (.card) {
23
  :scope {
24
    background: var(--bg-primary);
25
    border: 1px solid var(--border-color);
26
    color: var(--text-primary);
27
  }
28

29
  .subtitle {
30
    color: var(--text-secondary);
31
  }
32

33
  a {
34
    color: var(--accent);
35
  }
36
}

当 data-theme 属性变化时，就近原则会自动让正确的主题变量生效，即使在深层嵌套的组件中也不会错乱。

3.3 第三方内容隔离#

如果你的页面需要嵌入用户生成内容（UGC）、Markdown 渲染结果、或第三方 widget，可以用 @scope 的下界来防止样式泄漏：

1
/* 只给 .article-body 内的内容加样式，但不影响嵌入的 widget */
2
@scope (.article-body) to (.embedded-widget, .code-sandbox) {
3
  h1 { font-size: 2rem; margin-top: 2.5rem; }
4
  h2 { font-size: 1.5rem; margin-top: 2rem; }
5
  p { line-height: 1.8; margin-bottom: 1rem; }
6
  a { color: #3b82f6; text-decoration: underline; }
7
  img { max-width: 100%; border-radius: 8px; }
8

9
  blockquote {
10
    border-left: 4px solid #3b82f6;
11
    padding-left: 1rem;
12
    color: #555;
13
    font-style: italic;
14
  }
15

16
  pre {
17
    background: #1e1e1e;
18
    color: #d4d4d4;
19
    padding: 1rem;
20
    border-radius: 8px;
21
    overflow-x: auto;
22
  }
23
}

这样 .article-body 内的排版样式不会影响到 .embedded-widget 里的内容，两者互不干扰。

3.4 与 CSS Nesting 配合#

@scope 可以和 CSS 原生嵌套完美配合，写出更紧凑的代码：

1
@scope (.dashboard) {
2
  :scope {
3
    display: grid;
4
    grid-template-columns: 250px 1fr;
5
    min-height: 100vh;
6
  }
7

8
  .sidebar {
9
    background: #f8f9fa;
10
    padding: 1.5rem;
11

12
    .nav-item {
13
      padding: 0.75rem 1rem;
14
      border-radius: 6px;
15
      cursor: pointer;
16
      transition: background 0.15s;
17

18
      &:hover {
19
        background: #e9ecef;
20
      }
21

22
      &.active {
23
        background: #3b82f6;
24
        color: white;
25
      }
26
    }
27
  }
28

29
  .main-content {
30
    padding: 2rem;
31
  }
32
}

@scope 管隔离，CSS Nesting 管层级，各司其职。

4.1 Vue Scoped CSS 的实现原理#

Vue 的 <style scoped> 会在编译时：

1. 给组件模板中的每个元素添加一个唯一属性，如 data-v-7ba5bd90
2. 把 .title 编译成 .title[data-v-7ba5bd90]

1
<!-- 编译前 -->
2
<template>
3
  <div class="card">
4
    <h2 class="title">Hello</h2>
5
  </div>
6
</template>
7

8
<!-- 编译后 -->
9
<div class="card" data-v-7ba5bd90>
10
  <h2 class="title" data-v-7ba5bd90>Hello</h2>
11
</div>

这能用，但有几个问题：

• 属性选择器性能略差（虽然现代浏览器差距已经很小）
• 深度穿透语法不直观（:deep()、::v-deep 经历了多次变更）
• 生成的 HTML 不干净，多了一堆 data-v-xxx

4.2 @scope 的优势#

1
/* 用 @scope 实现类似效果 */
2
@scope (.card-component) {
3
  .title { font-size: 1.5rem; }
4
  .content { line-height: 1.8; }
5
}

• 零运行时开销：不需要编译，不需要添加属性
• HTML 保持干净：没有额外的 data-* 属性
• 原生就近原则：嵌套组件自动处理，不需要 :deep()
• 可以设下界：to 关键字比 :deep() 更精确

4.3 但 Vue Scoped CSS 仍有价值#

公平地说，Vue Scoped CSS 有一个 @scope 做不到的事：自动绑定。

<style scoped> 是声明式的——你不需要手动给根元素加类名，Vue 自动处理。而 @scope 需要你自己确保 HTML 中有对应的作用域根元素（比如 .card-component）。

在 Vue SFC 中，两者可以共存。短期内 <style scoped> 不会消失，但在非框架场景（原生 Web Components、多页面应用、静态站点），@scope 是更好的选择。

5.1 不提供 JavaScript 级别的隔离#

@scope 只隔离 CSS，不隔离 DOM 事件、JavaScript 变量。如果你需要完全隔离（比如微前端），还是得用 Shadow DOM 或 iframe。

5.2 作用域根必须存在于 DOM 中#

1
/* 这不会匹配任何东西，除非 DOM 中真的有 .my-scope 元素 */
2
@scope (.my-scope) {
3
  .title { color: red; }
4
}

@scope 不会凭空创建作用域，它只是限定已有元素的匹配范围。

5.3 不能跨 Shadow DOM 边界#

@scope 遵循 Shadow DOM 边界。如果你的组件在 Shadow DOM 内部，外部的 @scope 无法穿透进去（这其实是正确的行为）。

5.4 to 边界是排除性的#

@scope (.a) to (.b) 中，.b 元素及其所有后代都被排除。你不能「只排除 .b 本身但包含它的子元素」。

第一步：新组件直接用 @scope#

1
/* 新写的组件，直接用 @scope */
2
@scope (.notification-banner) {
3
  :scope {
4
    display: flex;
5
    align-items: center;
6
    padding: 1rem 1.5rem;
7
    border-radius: 8px;
8
    gap: 0.75rem;
9
  }
10

11
  .icon { font-size: 1.25rem; }
12
  .message { flex: 1; }
13
  .close-btn {
14
    background: none;
15
    border: none;
16
    cursor: pointer;
17
    opacity: 0.6;
18
    &:hover { opacity: 1; }
19
  }
20

21
  /* 变体 */
22
  :scope.success { background: #dcfce7; border: 1px solid #86efac; }
23
  :scope.error { background: #fef2f2; border: 1px solid #fca5a5; }
24
  :scope.warning { background: #fffbeb; border: 1px solid #fcd34d; }
25
}

第二步：高频修改的旧组件逐步迁移#

1
/* 旧 BEM 写法 */
2
.card__header { ... }
3
.card__header--highlighted { ... }
4
.card__body { ... }
5
.card__footer { ... }
6

7
/* 迁移为 @scope */
8
@scope (.card) {
9
  .header { ... }
10
  .header.highlighted { ... }
11
  .body { ... }
12
  .footer { ... }
13
}

类名从 .card__header--highlighted 变成 .header.highlighted，可读性提升一个量级。

第三步：利用 Stylelint 检查#

可以配置 Stylelint 规则，在新代码中强制使用 @scope，老代码保持兼容：

1
{
2
  "rules": {
3
    "selector-max-compound-selectors": 3,
4
    "comment-pattern": "/@scope/"
5
  }
6
}