CSS 超好懂的@Layer教學

乍看layer這個字，還以為是像Photoshop的圖層概念之類的東西，亦或是針對z-index之類的selector。結果竟是用來解決selector權重用的（對於CSS權重不是很了解的話，可以快速看一下這篇筆記。）依照layer宣告的順序，來決定樣式優先順序，後宣告的即使權重較小，也會覆寫。

這對於管理較大型、有一個一定複雜程度的樣式表的網站時，算是一個蠻實用的功能。可以減少在那邊important來important去的問題。

至於@layer的瀏覽器相容性，可以看一下這邊 https://caniuse.com/css-cascade-layers，目前看起來主流瀏覽器已經都支援，現階段已可以放心使用沒問題。

怎麼用？

將需要被分層級的樣式，用 @layer layername { … } 包起來，或者在import的時候宣告，例如：@import ‘base.css’ layer(base);。這時就已經會依照上述的順序規則來呈現結果了。

也可以另外宣告 layers 的順序，@layer 也可以是巢狀結構：

如果只宣告一個layer的順序呢？

假設我們有三個layers，如下面的例子：

我們重新宣告了 @layer layerThree; 的順序，那最下方的 <div class=”css-layer”> 會顯示什麼顏色的匡線呢？

答案是紅色匡線。為什麼呢？明明只宣告了layerThree，其他的為什麼也會跑進來參一咖？

因為即使沒有宣告所有Layer的順序，沒被宣告的Layer還是依然存在，且順序如同樣式表中的順序往後排在宣告過的layer後面。也就是說，剛剛雖然僅宣告了layerThree，最後得到的順序會是：

layerThree, layerOne, layerTwo

也就是layerTwo最為優先。同理，如果只宣告了 layerTwo，順序會變成：

layerTwo, layerOne, layerThree

變成layerThree最為優先。

non-layered style以及!important

non-layered style 比 layered style 優先，就算寫在 layered style之前也一樣。例如：

而 !important 就比較有趣。假設兩個都是 layered style 的 important ，優先度會依照寫的順序或宣告的順序而定。假設其中一個是non-layered style，卻是以layered style 的 !important 為優先。

參考資料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@layer