這個 CSS 特性，可能終結樣式沖突
作者：dev
我最近刷到一個即將改變組件樣式管理方式的 CSS 能力。如果你經常被組件樣式互相“串味”困擾，它也許就是那個無需再引入 JS 庫、還能保持樣式清爽分離的解法。
用傳統方式寫 CSS，樣式默認是全局生效的。兩個組件只要元素類型或類名“撞車”，很容易互相覆蓋。
我最近刷到一個即將改變組件樣式管理方式的 CSS 能力。
如果你經常被組件樣式互相“串味”困擾，它也許就是那個無需再引入 JS 庫、還能保持樣式清爽分離的解法。
讓我們直接看它怎么用。
樣式外泄與復雜度
現代 Web 基本都是組件化 UI。每個組件都有自己的“皮膚”。而傳統 CSS 在這方面經常拖后腿：
- 樣式默認全局，非常容易出現“樣式外泄”與互相沖突；
- 我在做 React 時長期用 CSS-in-JS，確實好使，但會帶來運行時開銷與包體變大。
為什么 @scope 是拐點
CSS @scope 可以為樣式劃定邊界，把組件級的隔離原生化，不再依賴 JS。
直白講：你在 @scope 中寫規則，并給它一個容器選擇器。瀏覽器會自動把這些規則限制在容器的子樹內。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
@scope (.profile-card) {
h2 {
color: darkblue;
font-weight: bold;
}
button {
background-color: lightblue;
border: none;
padding: 8px 16px;
border-radius: 5px;
}
}
</style>
</head>
<body>
<div class="profile-card">
<h2>John Doe</h2>
<button>Follow</button>
</div>
<button>Unstyled</button>
</body>
</html>@scope 內的規則只影響.profile-card 里的元素。上面 <h2> 與 <button> 只在卡片內生效，外面的 <button> 完全不受影響。
你也可以一次指定多個作用域，在不同 DOM 層級復用同一套樣式：
<!DOCTYPE html>
<html>
<head>
<style>
@scope (.card, .section) {
h2 {
color: green;
font-size: 20px;
}
}
</style>
</head>
<body>
<h2>Unstyled</h2>
<div class="card">
<h2>Card</h2>
</div>
<div class="section">
<h2>Section</h2>
</div>
<div class="body">
<h2>Unstyled</h2>
</div>
</body>
</html>工作原理：作用域根與邊界
@scope 會定義一個根（比如 .my-component），并把規則限制在這棵子樹中。
它也支持邊界限制，用于處理嵌套比較復雜的場景。比如有嵌套組件、類名還重名時，你可以聲明在哪些節點處停止作用，避免深入套娃。
<!DOCTYPE html>
<html>
<head>
<style>
@scope (.card) to (.footer, .additional) {
h2 {
color: green;
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="card">
<div class="header">
<h2>Header</h2>
</div>
<div class="body">
<h2>Body</h2>
</div>
<div class="additional">
<h2>Additional content</h2>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>上面的 to (.footer, .additional) 就是作用域邊界：h2 的樣式僅在 .card 內生效，但不會進入.footer 與 .additional。
什么時候用 @scope
適合以下場景：
- 原生、輕量的樣式隔離，不增加 JS 與構建復雜度；
- 更可讀、自動局部化的 CSS，天然待在組件邊界內；
- 避免 CSS-in-JS 或樣式庫帶來的包體與運行時成本；
- 構建設計系統或可復用組件時，保證風格互不干擾；
- 無論 vanilla JS 還是 React，都能無縫集成，無需更換工具鏈。
不太適合：
- 樣式需要強動態（基于運行時狀態/props 深度分支）；
- 需要 CSS-in-JS 擅長的主題化、變體系統直接在 JS 中編排。
就純隔離而言，@scope 是一個干凈且前瞻的答案。
瀏覽器支持
現代瀏覽器支持情況整體不錯：
- Chrome / Edge：118+（2023 年 10 月起穩定）
- Safari：17.4+（2024 年 3 月起穩定）
- Opera：106+（2023 年底起穩定）
- Firefox：穩定版暫未支持
整體兼容度約 47% 左右：覆蓋了多數用戶，但 Firefox 用戶暫時缺席。
參考資料
這個特性不止“作用域與邊界”這么簡單。想繼續深挖，建議查閱 MDN 文檔 獲取更完整的能力介紹與規范細節。
責任編輯：武曉燕
來源：
大遷世界
