在 Chrome 118 版本中，新增了对 @scope 规则的支持。@scope 规则允许开发人员将样式规则限定在给定的作用域根节点上，并根据该作用域根节点的接近程度来应用样式元素。这个规则改变了原有的先后顺序或权重来覆盖样式规则。 在组件样式中，我们通常采用 CSS Modules 或 Scoped CSS 来给样式设置作用域，这两种方式是通过生成随机类名来避免重复。而 @scope 规则使用在组件样式中可能会更加方便。

以下面的 HTML 代码布局为例：

<div class="blue">
  <div class="green">
    <div class="red">
      <button>不是按钮</button>
    </div>
  </div>
</div>

在不使用 @scope 的情况下，我们按照先后设置按钮背景色的方式写样式：

.red button {
  background-color: red;
}

.green button {
  background-color: green;
}

.blue button {
  background-color: blue;
}

在这种情况下，最后一个样式会覆盖前面的样式。然后我们使用 @scope 规则来设置样式，@scope 规则需要使用嵌套的格式写：

@scope (.red) {
  button {
    background-color: red;
  }
}

@scope (.green) {
  button {
    background-color: green;
  }
}

@scope (.blue) {
  button {
    background-color: blue;
  }
}

对比两种方式如下图所示：

可以看到，在使用@scope规则后，背景变成红色，其样式的作用范围限制在最近的@scope元素下。

也许流行的组件库也可以改变使用冗长的 CSS BEM 命名规范了，就如 vant 组件库。

@scope (.van-loading) {
  .circular {
    display: block;
    width: 100%;
    height: 100%;
  }
  .circular circle {
    /* ... */
  }
  .text {
    /* ... */
  }
}

当然，你可能不需要将所有的样式都设置在@scope规则中，你可以使用排除选择器来排除不需要的样式。例如：

<div class="component">
  <p class="first">@scope 规则学习 1</p>
  <p>@scope 规则学习 2</p>
  <p class="third">@scope 规则学习 3</p>
  <p>@scope 规则学习 4</p>
</div>

@scope (.component) to (.first, .third) {
  p {
    color: red;
  }
}

效果如图：