CSS3中@layer的示例分析

這篇文章給大家分享的是有關(guān)CSS3中@layer的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

過往 CSS 優(yōu)先級中存在的問題

如果我們的頁面上存在非常多的樣式，譬如有我們開發(fā)頁面的時候的自定義樣式，也有引入的組件庫樣式。這時候樣式將會非?；靵y難以管理。

當(dāng)我們想覆蓋一些本身非我們書寫的樣式時候，往往不得不通過使用優(yōu)先級權(quán)重更高的樣式名，去覆蓋那些樣式。

同時，當(dāng)樣式優(yōu)先級感到難以控制時，開發(fā)者習(xí)慣濫用 !important 去解決，這又循環(huán)導(dǎo)致了后續(xù)更混亂的樣式結(jié)構(gòu)。

基于讓 CSS 得到更好的控制和管理的背景，CSS @layer 應(yīng)運(yùn)而生。

何為 CSS @layer？

CSS @layer 從 CSS Cascading and Inheritance Level 5 被規(guī)范定義。

何為 CSS @layer？簡單而言，CSS @規(guī)則 中的@layer聲明了一個 級聯(lián)層， 同一層內(nèi)的規(guī)則將級聯(lián)在一起， 這給予了開發(fā)者對層疊機(jī)制的更多控制。

語法也非常簡單，看這樣一個例子：

@layer utilities {
  /* 創(chuàng)建一個名為 utilities 的級聯(lián)層 */
}

這樣，我們就創(chuàng)建一個名為 utilities 的 @layer 級聯(lián)層。

@layer 級聯(lián)層如何使用呢？

通過 @layer 級聯(lián)層管理樣式優(yōu)先級

@layer 級聯(lián)層最大的功能，就是用于控制不同樣式之間的優(yōu)先級。

看下面這樣一個例子，我們定義了兩個 @layer 級聯(lián)層 A 和 B：

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}

由于 @layer B 的順序排在 @layer A 之后，所以 @layer B 內(nèi)的所有樣式優(yōu)先級都會比 @layer A 高，最終 div 的顏色為 green：

當(dāng)然，如果頁面內(nèi)的 @layer 太多，可能不太好記住所有 @layer 的順序，因此，還有這樣一種寫法。

我們可以同時命名多個 @layer 層，其后再補(bǔ)充其中的樣式規(guī)則。

<div></div>

@layer B, C, A;
div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}

上述代碼，我們首先定義了 @layer B, C, A 三個 @layer 級聯(lián)層。而后再后面的 CSS 代碼中補(bǔ)充了每個級聯(lián)層的 CSS 代碼，但是樣式的優(yōu)先級為：

A > C > B

因此，最終的 div 的顏色值為 @layer A 中定義的顏色，為 blue：

到這里，CSS @layer 的作用可以清晰的被窺見。

利用 CSS @layer，我們可以將 CSS 不同模塊劃入不同的 @layer 中，利用先后順序，非常好的去控制全局的樣式優(yōu)先級。

@layer 級聯(lián)層的三種定義引入方式

上面其實提到了兩種 @layer 級聯(lián)層的定義引入方式，這里再描述下，一共有 3 種引入 CSS @layer 級聯(lián)層的方式。

1、直接創(chuàng)建一個塊級的 @layer 規(guī)則，其中包含作用于該層內(nèi)部的CSS規(guī)則：

@layer utilities {
  p {
    padding: .5rem;
  }
}

2、一個級聯(lián)層可以通過 @import 來創(chuàng)建，規(guī)則存在于被引入的樣式表內(nèi)：

@import(utilities.css) layer(utilities);

3、創(chuàng)建帶命名的級聯(lián)層，但不指定任何樣式。樣式隨后可在 CSS 內(nèi)任意位置添加：

@layer utilities;
// ...
// ...
@layer utilities {
    p {
        color: red;
    }
}

非 @layer 包裹層與 @layer 層內(nèi)樣式優(yōu)先級

當(dāng)然，這里還會有一種情況，沒有被 @layer 包裹的樣式，它的優(yōu)先級和被 @layer 包裹的樣式相比，又會如何呢？

看這樣一個例子：

@layer A { a { color: red; } }
@layer B { a { color: orange; } }
@layer C { a { color: yellow; } }
a { color: green; } /* 未被 @layer 包裹的樣式 */

這里會有一個非常重要的結(jié)論，非 @layer 包裹的樣式，擁有比 @layer 包裹樣式更高的優(yōu)先級，因此，上述規(guī)則的排序是：

未被 @layer 包裹的樣式 > @layer C > @layer B > @layer A

匿名層與嵌套層

還有兩種層級關(guān)系，分別是匿名層和嵌套層。

匿名層

允許創(chuàng)建一個不帶名字的 @layer：

@layer {
  p {
    margin: 1rem;
  }
}

這里，創(chuàng)建了一個匿名層。匿名層的兩個重要特性：

• 創(chuàng)建后無法向其再添加規(guī)則

• 該層和其他命名層功能一致，優(yōu)先級也遵循后定義的匿名層，比其他已定義的 @layer 層，優(yōu)先級更高

看一個例子：

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer {
    div {
        background: pink;
    }
}
@layer B, C, A;
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}

上述代碼，我們首先定義了一個匿名層，指定了 div 的顏色為 pink，而后又定義了 @layer B, C, A。這里優(yōu)先級順序為：

A > C > B > 匿名層

最終的顏色為 @layer A 內(nèi)的顏色值 -- blue：

如果，我們將匿名層放在最后的話：

div {
    width: 200px;
    height: 200px;
}
@layer B, C, A;
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}
@layer {
    div {
        background: pink;
    }
}

此時，樣式的優(yōu)先級順序為：

匿名層 > A > C > B

最終的顏色為匿名層內(nèi)的顏色值 -- pink：

嵌套層

說完了匿名層，我們再來看看嵌套層。

顧名思義，嵌套層的意思就是在 @layer 內(nèi)部，我們可以再嵌套使用 @layer 級聯(lián)層。像是這樣：

@layer A {
  @layer B{
    ...
  }
}

當(dāng)然，它還有另外一種語法，上述代碼等價于：

@layer A.B {
  ...
}

了解了這個后，那么，看這樣一個例子：

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
    
    @layer B {
        div {
            background: red;
        }
    }
}

我們在 @layer A 中嵌套一個 @layer B，同時都定義了一個 div 的樣式，最終 div 的 background 到底是什么顏色呢？

最終為藍(lán)色 background: blue，為什么呢？這個很好記憶，我們假設(shè)如果沒有 @layer A 這一層包裹，其實就是上述說的 @layer 層與非 @layer 層的優(yōu)先級比較，這里，非 @layer 層（我們可以理解為更高級別的一層 @layer）的優(yōu)先級更高。

因此，對于單個 @layer 內(nèi)的嵌套關(guān)系，樣式優(yōu)先級為：

@layer A > @layer A.B

多層嵌套層的優(yōu)先級關(guān)系

OK，再看這樣一種情況：

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red;
        }
    }
}
@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green;
        }
    }
}

這里存在同時存在多個嵌套 @layer 的情況。那么這種情況優(yōu)先級又是如何劃分呢？

這里的規(guī)則是，優(yōu)先級高的 @layer，無論是否存在嵌套，優(yōu)先級都整體比優(yōu)先級低的 @layer（無論是否存在嵌套）高，因此，這里的優(yōu)先級排序是：

@layer C > @layer C.D > @layer A > @layer A.B

!important 對 CSS @layer 的影響

再來看看  !important 對 CSS @layer 的影響。

這里可以分為幾種情況，先看其中一種：

<div></div>

div {
    width: 200px;
    height: 200px;
    background: black;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red;
        }
    }
}
@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green!important;
        }
    }
}

上述代碼，我們給 @layer C.D 的 <div> 添加了一個 !important 規(guī)則。

如果，不考慮 !important 規(guī)則，那么實際的 CSS 優(yōu)先級為（序號越高，優(yōu)先級越高）：

• @layer A.B

• @layer A

• @layer C.D

• @layer C

• 非 layer 包裹塊

那么，<div> 的顏色應(yīng)該為黑色 black。然而，這里給 @layer C.D 的 <div> 添加了一個 !important 規(guī)則。

實際上，最終 <div> 的顏色為 green，也就是最終的優(yōu)先級排序為（序號越高，優(yōu)先級越高）：

• @layer A.B

• @layer A

• @layer C

• 非 layer 包裹塊

• !important 下的 @layer C.D

也就是說，這里 !important 規(guī)則的優(yōu)先級還是凌駕于非 !important 規(guī)則之上的。

上述 DEMO 還是比較有意思的，感興趣的可以看看：CodePen Demo -- CSS Cascade @layer Demo

https://codepen.io/Chokcoco/pen/KKZKBRr

非 @layer 包含塊 !important 與 @layer 包含塊 !important

到這里，你也許會以為你懂了。好，我們再來看一個 DEMO，如果我們給非 @layer 包含塊，也加上一個 !important 規(guī)則，事情就變得有趣了。

<div></div>

div {
    width: 200px;
    height: 200px;
    background: black!important;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red;
        }
    }
}
@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green!important;
        }
    }
}

仔細(xì)看上述代碼，非 @layer 包含塊，我們也加上了一個 !important 規(guī)則，按照上述我能描述的規(guī)則來看，非 @layer 包含塊的優(yōu)先級高于 @layer 包含塊，那么正常而言，我們不難猜測，這里 background: black!important 的優(yōu)先級應(yīng)該要比 background: green!important 高，最終 <div> 應(yīng)該展示黑色。

而實際上，這里最終 <div> 的顏色還是 green。這里就又有一個非常有意思的知識點了，!important 下樣式優(yōu)先級的規(guī)則與非 !important 正常狀態(tài)下剛好相反。

這是一個非常重要的特性，在比較正常（非 !important）規(guī)則時，越是級聯(lián)（排序較后的 @layer 規(guī)則），優(yōu)先級越低；反之，在比較 !important 規(guī)則時，越是級聯(lián)靠后的（排序較后的 @layer 規(guī)則），優(yōu)先級越高。

這個，更進(jìn)一步的話，我們需要去了解 CSS Cascading 相關(guān)的知識了。

CSS Cascade 規(guī)范

在 CSS @layer 之前，我們簡單看一張圖：

上圖表面的是在沒有 CSS @layer 之前，CSS 樣式申明的優(yōu)先級排序，根據(jù) CSS Cascading 4(Current Work) 標(biāo)準(zhǔn)，定義的當(dāng)前規(guī)范下申明的層疊順序優(yōu)先級如下（越往下的優(yōu)先級越高，下面的規(guī)則按升序排列）：

• Normal user agent declarations

• Normal user declarations

• Normal author declarations

• Animation declarations

• Important author declarations

• Important user declarations

• Important user agent declarations

• Transition declarations

按照上述算法，可以得到一個樣式優(yōu)先級的排序，大概是這樣（越往下的優(yōu)先級越高，下面的規(guī)則按升序排列）：

• User Agent - 用戶代理普通樣式

• User - 用戶設(shè)置的普通樣式

• Author - 頁面作者普通樣式

• Animations - 動畫樣式

• ??Author - 頁面作者 !important 樣式

• ??User - 用戶設(shè)置的 !important 樣式

• ??User Agent - 用戶代理的 !important 樣式

• Transitions - 過渡樣式

簡單解釋一下：用戶代理樣式：瀏覽器會有一個基本的樣式表來給任何網(wǎng)頁設(shè)置默認(rèn)樣式。這些樣式統(tǒng)稱用戶代理樣式頁面作者樣式：網(wǎng)頁的作者可以定義文檔的樣式，這是最常見的樣式表。大多數(shù)情況下此類型樣式表會定義多個，它們構(gòu)成網(wǎng)站的視覺和體驗，即頁面主題，可以理解為頁面作者樣式用戶樣式：讀者，作為瀏覽器的用戶，可以使用自定義樣式表定制使用體驗，自定義用戶偏好，可以理解為用戶樣式

關(guān)于 CSS Cascading，也就是層疊規(guī)范，你可以看看我的這篇文章加深理解 -- 深入理解 CSS（Cascading Style Sheets）中的層疊（Cascading）。

https://github.com/chokcoco/iCSS/issues/76

而當(dāng)有了 CSS @layer 之后，這個層疊優(yōu)先級順序有了更新，具體優(yōu)先級如下：

整體會變更為復(fù)雜一些，但是總體還是遵循了兩個規(guī)則：

• !important 樣式高于非 !important 樣式

• 在比較 !important 規(guī)則時，優(yōu)先級順序與正常規(guī)則相反，在正常狀態(tài)下優(yōu)先級越低的，在 !important 下優(yōu)先級越高

總結(jié)一下

綜上，便是關(guān)于 CSS @layer 的基礎(chǔ)相關(guān)知識。

CSS @layer 的誕生，讓我們有能力更好的劃分頁面的樣式層級，更好的處理內(nèi)部樣式與外部引用樣式的優(yōu)先級順序，屬于比較重大的一次革新。

同時，它也讓我們意識到要逐漸摒棄大規(guī)模使用 !important 去覆蓋樣式優(yōu)先級的錯誤做法，避免許多因為優(yōu)先級問題帶來的不必要的副作用。

當(dāng)然，時至今天（2022-03-14），我們來看一眼兼容性：

雖然紅了一大片，但是，在最新版的 Chrome、Safari、Firefox、Edge 都已經(jīng)開始支持 CSS @layer，并且，目前已經(jīng)可以通過一些 polyfill 初步使用它，相信在不久的將來，它將會成為業(yè)務(wù) CSS 代碼中必不可少的一部分。

感謝各位的閱讀！關(guān)于“CSS3中@layer的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！