為了解決全局作用域問題，web 開發(fā)者們發(fā)明了各種方法論和工具。

這些方案雖然有效，但它們要么增加了開發(fā)者的心智負(fù)擔(dān)（BEM），要么引入了額外的構(gòu)建步驟和復(fù)雜性（CSS Modules, CSS-in-JS）。

現(xiàn)在，新方案 @scope 已被各大瀏覽器兼容。

什么是 CSS @scope？

@scope 是一個(gè)全新的 CSS @ 規(guī)則，它允許我們將樣式的作用域限制在 DOM 樹的特定部分。即，再也不會(huì)泄露出去影響到全局。

傳統(tǒng)寫法 (BEM)

為了避免樣式?jīng)_突，我們可能會(huì)使用 BEM 命名法：

HTML:

<div class="card">
  <h2 class="card__title">文章標(biāo)題</h2>
  <p class="card__content">這里是一些內(nèi)容...</p>
  <a href="#" class="card__link">閱讀更多</a>
</div>

<!-- 頁面其他地方可能還有一個(gè)不相關(guān)的 title -->
<h1 class="page-title">FedJavaScript</h1>

CSS:

這種方式很有效，但缺點(diǎn)是類名冗長、書寫繁瑣，并且需要團(tuán)隊(duì)嚴(yán)格遵守規(guī)范。

使用 @scope 的新寫法

現(xiàn)在，看看使用 @scope 有多清爽：

HTML (更簡潔了！):

<div class="card">
  <h2>文章標(biāo)題</h2>
  <p>這里是一些內(nèi)容...</p>
  <a href="#">閱讀更多</a>
</div>

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

CSS:

HTML 變得結(jié)構(gòu)更干凈了，CSS 更直觀了，也不存在樣式泄露問題。

:scope 偽類：引用作用域根元素

在 @scope 塊內(nèi)部，我們可以使用 :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 {
    /* ... */
  }
}

這使得組件的所有樣式（包括容器自身和其后代）都可以被優(yōu)雅地組織在一起，實(shí)現(xiàn)了真正的樣式內(nèi)聚。

@scope 不僅僅是一個(gè)新功能，它代表了 CSS 發(fā)展的一個(gè)重要方向：更好地服務(wù)于組件化開發(fā)的未來。它解決了 CSS 長期以來的核心痛點(diǎn)，讓開發(fā)者能夠以一種更簡單、更直觀、更強(qiáng)大的方式來組織和管理樣式。