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 的加入代表我們離「零工具鏈的前端開發」又近了一步。