為了解決全局作用域問題，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:

這種方式很有效，但缺點是類名冗長、書寫繁瑣，并且需要團隊嚴格遵守規范。

使用 @scope 的新寫法

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

HTML (更簡潔了！):

<div class="card">
  <h2>文章標題</h2>
  <p>這里是一些內容...</p>
  <a href="#">閱讀更多</a>
</div>

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

CSS:

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 長期以來的核心痛點，讓開發者能夠以一種更簡單、更直觀、更強大的方式來組織和管理樣式。