CSS @scope 完整教學：原生選擇器作用域讓你告別 BEM 和 CSS Modules

CSS 樣式衝突的老問題

寫過大型專案的前端工程師都知道，CSS 最讓人頭痛的不是語法，是全域污染。你寫了一個 .title 樣式，結果整個頁面的 title 都被影響。

為了解決這問題，我們發明了各種「人為約定」：BEM 命名法、CSS Modules、CSS-in-JS。每種都在用不同方式繞過 CSS 的全域性問題。

但現在，CSS 原生就能做到樣式隔離了。@scope 讓你直接在 CSS 定義「這些樣式只在這個範圍內有效」。不需要編譯器、不需要命名約定、不需要 runtime。

如果你學過 CSS Mixins @apply，你會發現 CSS 正在一步步把預處理器的功能吃回來。

CSS @scope 是什麼

CSS @scope 是一個新的 at-rule，讓你把樣式規則的作用範圍限制在特定的 DOM 子樹內。用白話說：「這些樣式只在 .card 裡面有效，出了 .card 就當這些規則不存在」。

這不只是 specificity 的問題。@scope 創造了真正的「作用域邊界」——即使兩個元件都有 .title，樣式完全互不干擾。

基本語法與使用方式

@scope (.card) {
  .title {
    font-size: 1.5rem;
    color: #1a1a2e;
  }
  .description {
    color: #555;
    line-height: 1.6;
  }
  img {
    border-radius: 8px;
  }
}

這段 CSS 的規則只在 .card 的子元素中生效。頁面其他地方的 .title 完全不會被影響。

也可以在 <style> 標籤裡直接使用，省略 scope 的根選擇器，自動以最近父元素為作用域：

<div class="card">
  <style>
    @scope {
      .title { color: blue; }
    }
  </style>
  <h3 class="title">只有這個是藍色</h3>
</div>

Scoping Limit 作用域下界

@scope 最強大的功能是可以設定「下界」——到某個元素就停止：

@scope (.card) to (.card-footer) {
  p { color: #333; font-size: 1rem; }
}

p 的樣式只在 .card 和 .card-footer 之間有效。.card-footer 裡的 p 不會被影響。

對巢狀元件特別有用——card 裡面又嵌套另一個 card 時，可以精確控制樣式只影響外層。這是 BEM 和 CSS Modules 做不到的。

@scope vs BEM vs CSS Modules

比較	CSS @scope	BEM	CSS Modules
需要工具鏈	不需要	不需要	需要 bundler
樣式隔離	真正隔離	靠命名約定	編譯時 hash
作用域下界	支援	不支援	不支援
Runtime 開銷	零	零	零
瀏覽器原生	是	只是約定	需要編譯

新專案而且目標瀏覽器支援 @scope，它絕對是最乾淨的選擇。

實戰範例

開發 Design System 有 Card、Modal、Sidebar 三個元件，每個都有 .header 和 .content：

@scope (.modal) {
  .header { padding: 1rem; border-bottom: 1px solid #eee; font-size: 1.25rem; }
  .content { padding: 1.5rem; }
}

@scope (.sidebar) {
  .header { padding: 0.75rem; background: #f5f5f5; font-size: 0.9rem; }
  .content { padding: 1rem; overflow-y: auto; }
}

三個 .header 各自有不同樣式，完全不衝突。不需要 .modal__header、.sidebar__header 這種冗長類名。

搭配 CSS Container Queries 一起用，打造真正「元件級別」的設計系統。

瀏覽器支援度

2026 年初支援情況：Chrome 118+、Edge 118+、Safari 17.4+、Firefox 128+。主流現代瀏覽器都已支援。

需要兼顧舊瀏覽器可用 @supports 做 fallback。另外 Tailwind CSS v4 也開始支援在 @scope 內使用 utility class。

結語

CSS @scope 解決了 CSS 存在二十幾年的根本問題——全域作用域。從 Scroll-Driven Animations 到 CSS 原生 if()，CSS 正在變得越來越強大。@scope 的加入代表我們離「零工具鏈的前端開發」又近了一步。