CSS 網頁切版 layer 樣式管理

CSS 的層疊新秩序：了解 @layer

Rene Wu 2025/10/15 10:00:00

0 25

為什麼需要 @layer？

在 CSS 的世界裡，樣式的優先順序遵循一套既定規則：來源 (inline ＞內部載入＞外部載入)、特殊宣告 (!important)、選擇器權重 (specificity) 以及撰寫順序 (後者覆蓋前者)。這套邏輯雖然運行多年，但隨著專案規模擴大、框架與工具的盛行，常常會遇到樣式「莫名被覆蓋」或者「不小心影響到全域」的問題。

這樣的情況下，光靠「誰寫在後面就贏」已經不夠直觀了。為了解決這個痛點，CSS Working Group 引入了 @layer，它能在程式碼層面上，為 CSS 樣式設定一個「分層」的秩序，讓層疊更有計畫性。

@layer 的基本語法

@layer 的核心概念就是先定義好一組「層級順序」，再把樣式放到對應的分層裡。

/* 宣告層的順序 */
@layer reset, base, components, utilities;

/* Reset 樣式 :: 消除不同瀏覽器在解釋 HTML 元素和套用預設樣式時的差異 */
@layer reset {
  * { margin: 0; padding: 0; }
}

/* 全域基本樣式 :: 所有或大部分元素定義通用、基礎的外觀和風格 */
@layer base {
  body { font-family: "Montserrat", sans-serif; }
}

/* 元件樣式 :: 可重複使用的 UI 元件定義專屬的樣式 */
@layer components {
  .btn { padding: 8px 16px; }
}

/* 工具類樣式 :: 單一、特定、可重複使用的樣式規則，用於快速修改元素的特定屬性 */
@layer utilities {
  .text-center { text-align: center; }
}

在上面的範例中，無論 CSS 出現順序為何，樣式套用時都會依照 reset → base → components → utilities 的先後層級來決定優先權。而同一分層裡的規則，依然會遵循一般 CSS 的層疊邏輯順序。

應用情境

大型專案樣式管理
將 reset、base、components、utilities 分層，可以降低樣式互相覆蓋的狀況
多人協作開發
不同團隊或模組能在不同層中撰寫 CSS，避免因撰寫順序不同而造成樣式衝突
框架與自訂樣式並用
例如在 Bootstrap 中加入自訂樣式時，可以透過 @layer 來確保框架樣式與自訂樣式的優先順序

搭配 SCSS 的寫法

由於 SCSS 支援巢狀結構，@layer 的寫法能夠自然融入其中，讓樣式更有組織性：

@layer components {
  .card {
    padding: 16px;
    border: 1px solid #ddd;

    .card-title {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
}

這樣的寫法，不僅保持了分層的清晰性，也保留了 SCSS 的可讀性與維護性。

另外，現在原生 CSS 已支援 Nesting，不需再依賴預處理器，就能直接在 CSS 裡撰寫巢狀選擇器，語法更直觀，降低編譯依賴，提升效能與可讀性，下一篇文章再詳細說明。

瀏覽器支援度

目前 @layer 已經進入主流瀏覽器支援範圍：