这个 CSS 特性，可能终结样式冲突

最新推荐文章于 2025-11-24 23:20:58 发布

转载最新推荐文章于 2025-11-24 23:20:58 发布 · 27 阅读

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s?__biz=MzI4NDYxNTM0OQ==&mid=2247489821&idx=1&sn=90168694f37e865f529111390bd8a64e&chksm=ea4f5894e40642b02c90f04d8310bd7e2c99e1c635dd15197b3928ea2d2ce83c972f091807e3&scene=126&sessionid=0

文章标签：

#css #前端

我有一支技术全面、经验丰富的小型团队，专注高效交付中等规模外包项目，有需要外包项目的可以联系我

用传统方式写 CSS，样式默认是全局生效的。两个组件只要元素类型或类名“撞车”，很容易互相覆盖。

我最近刷到一个即将改变组件样式管理方式的 CSS 能力。

如果你经常被组件样式互相“串味”困扰，它也许就是那个无需再引入 JS 库、还能保持样式清爽分离的解法。

让我们直接看它怎么用。

样式外泄与复杂度

现代 Web 基本都是组件化 UI。每个组件都有自己的“皮肤”。而传统 CSS 在这方面经常拖后腿：

样式默认全局，非常容易出现“样式外泄”与互相冲突；
我在做 React 时长期用 CSS-in-JS，确实好使，但会带来运行时开销与包体变大。

为什么 `@scope` 是拐点

CSS @scope 可以为样式划定边界，把组件级的隔离原生化，不再依赖 JS。

直白讲：你在 @scope 中写规则，并给它一个容器选择器。浏览器会自动把这些规则限制在容器的子树内。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
    @scope (.profile-card) {
      h2 {
        color: darkblue;
        font-weight: bold;
      }
      button {
        background-color: lightblue;
        border: none;
        padding: 8px 16px;
        border-radius: 5px;
      }
    }
  </style>
</head>
<body>
<div class="profile-card">
    <h2>John Doe</h2>
    <button>Follow</button>
</div>
<button>Unstyled</button>
</body>
</html>

@scope 内的规则只影响.profile-card 里的元素。上面 <h2> 与 <button> 只在卡片内生效，外面的 <button> 完全不受影响。

极客时间周年庆有个给用户的福利抽奖，人人都可以参与，100%中奖，完全 0 套路，赶紧白票。

你也可以一次指定多个作用域，在不同 DOM 层级复用同一套样式：

<!DOCTYPE html>
<html>
<head>
<style>
    @scope (.card, .section) {
      h2 {
        color: green;
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
<h2>Unstyled</h2>
<div class="card">
    <h2>Card</h2>
</div>
<div class="section">
    <h2>Section</h2>
</div>
<div class="body">
    <h2>Unstyled</h2>
</div>
</body>
</html>

工作原理：作用域根与边界

@scope 会定义一个根（比如 .my-component），并把规则限制在这棵子树中。

它也支持边界限制，用于处理嵌套比较复杂的场景。比如有嵌套组件、类名还重名时，你可以声明在哪些节点处停止作用，避免深入套娃。

<!DOCTYPE html>
<html>
<head>
<style>
    @scope (.card) to (.footer, .additional) {
      h2 {
        color: green;
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
<div class="card">
    <div class="header">
      <h2>Header</h2>
    </div>
    <div class="body">
      <h2>Body</h2>
    </div>
    <div class="additional">
      <h2>Additional content</h2>
    </div>
    <div class="footer">
      <h2>Footer</h2>
    </div>
</div>
</body>
</html>

上面的 to (.footer, .additional) 就是作用域边界：h2 的样式仅在 .card 内生效，但不会进入.footer 与 .additional。