为了解决全局作用域问题，web 开发者们发明了各种方法论和工具。

这些方案虽然有效，但它们要么增加了开发者的心智负担（BEM），要么引入了额外的构建步骤和复杂性（CSS Modules, CSS-in-JS）。

现在，新方案 @scope 已被各大浏览器兼容。

什么是 CSS@scope？

@scope 是一个全新的 CSS @ 规则，它允许我们将样式的作用域限制在 DOM 树的特定部分。即，再也不会泄露出去影响到全局。

传统写法 (BEM)

为了避免样式冲突，我们可能会使用 BEM 命名法：

HTML:

<div class="card">
  <h2 class="card__title">文章标题</h2>
  <p class="card__content">这里是一些内容...</p>
  <a href="#" class="card__link">阅读更多</a>
</div>

<!-- 页面其他地方可能还有一个不相关的 title -->
<h1 class="page-title">FedJavaScript</h1>

CSS:

/* BEM 命名法 */
.card__title {
    font-size: 1.5em;
    color: #333;
}

.card__content {
    color: #666;
    line-height: 1.6;
}

.card__link {
    color: blue;
    text-decoration: none;
}

这种方式很有效，但缺点是类名冗长、书写繁琐，并且需要团队严格遵守规范。

使用 @scope 的新写法

现在，看看使用 @scope 有多清爽：

HTML (更简洁了！):

<div class="card">
  <h2>文章标题</h2>
  <p>这里是一些内容...</p>
  <a href="#">阅读更多</a>
</div>

<h1 class="page-title">FedJavaScript</h1>

CSS:

@scope (.card) {
    h2 {
        font-size: 1.5em;
        color: #333;
    }

    p {
        color: #666;
        line-height: 1.6;
    }

    a {
        color: blue;
        text-decoration: none;
    }
}

/* 这里的 h2, p, a 规则不会影响到 .card 外部的任何元素 */

HTML 变得结构更干净了，CSS 更直观了，也不存在样式泄露问题。

:scope 伪类：引用作用域根元素

在 @scope 块内部，我们可以使用 :scope 伪类来直接选中作用域的根元素本身。

@scope (.card) {
  /* :scope 指向 .card 元素本身 */
  :scope {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  h2 {
    /* ... */
  }
}

这使得组件的所有样式（包括容器自身和其后代）都可以被优雅地组织在一起，实现了真正的样式内聚。

@scope 不仅仅是一个新功能，它代表了 CSS 发展的一个重要方向：更好地服务于组件化开发的未来。它解决了 CSS 长期以来的核心痛点，让开发者能够以一种更简单、更直观、更强大的方式来组织和管理样式。