CSS Layer

閱讀範圍

1. CSS | 不曉得能不能像洋蔥一層一層的 Cascade Layers - 基本用法

2. [CSS] Cascade and Layer

3. CSS 超好懂的@Layer教學

4. CSS Cascade Layers (@layer)，解決長期以來 CSS 競爭權重 (Specificity) 的問題

作者的觀點 or 知識點

• 以優先級來講，永遠先考慮 Cascade Layers，再考慮 Specificity (權重)

• 在 @layer 中的 CSS selector 仍然要寫全稱

• Chrome Developer 的文章建議，CSS 檔案一開始就宣告 @layer，另一方面也明確的指定 layer order。

• 沒有指定 css layer 的 css 都會被歸類在 non-layered CSS, 而 non-layered 的優先順序會比 layered 高

• !important的優先級還是最高

• non-layered 跟 layered 都有 !important 時會以 layered 的為主

• @import 'base.css' layer(base); 這樣寫可以替引入的 CSS 檔案設定 layer

作者的舉例

<style>
  
  @layer foobar {
    /* 雖然 specificity 較高，但因為 cascade 較低，因此這裡的樣式最終會被覆蓋 */
    body article figure p {
      border: 3px solid red;
    }
  }
 
  p {
    border: 3px solid blue;
 
  }
</style>

/* named layer */
@layer layer-name { rules };
 
/* anonymous layer */
@layer { rules };
 
/* define layer and could append rules later */
@layer layer-name;
 
/* define multiple layers with specific "order", laster-declared layers win */
@layer layer-name, layer-name, layer-name; 
 
/* create layer by using @import, the layer name will be "utilities" */
@import 'theme.css' layer(utilities);

試著用一段簡短文字描述此次閱讀的內容

CSS layer 解決了過往用多個權重來處理 css 覆蓋的問題，並且在一些套用 library 的樣式使用上會更有彈性，在維護上會更為方便

補充