認識 CSS @layer 屬性與應用

CSS 的 @layer 是一個最近開始被討論的屬性，他會改變我們對於權重的使用與認知。

本來我們在撰寫 CSS 的時候要先認識選擇器與權重的關係，簡單舉例就是當有一個元素長這樣：

<div class="block"></div>

如果要控制他的樣式的話，使用 .block 就會比 div 還要高。

而 @layer 這個屬性使用了以後，他的權重就會在之前所有的選擇器之下，比如：

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

@layer 的規則是 @layer utilities，utilities 可以自訂名稱也可以不寫，我這邊就簡單定義為 A 跟 B，這時會發現在 @layer 裡定義的樣式都不會蓋過原本 div 的，所以區塊會是紫色的。

所以 @layer 可以用來定義樣式且不會去干擾到預設定義的樣式，這邊當我拿掉 div 裡的 background，就能看到 @layer 內的顏色了。

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

因為 B 寫在比較後面，所以會顯示橘色：

如果有寫很多個 @layer 時，後面會蓋掉前面的，@layer 也提供了可以讓開發者自訂權重的方式，像是我在 @layer 加上這段：@layer B,C,A;

@layer B,C,A;
@layer A{
  div{
    background: blue;
  }
}
@layer B{
  div{
    background: orange;
  }
}
@layer C{
  div{
    background: red;
  }
}

權重就會變成 A>C>B，所以顏色會是藍色的。

如果再加上一個沒有命名的 @layer，則其顯示的優先權就更前面，像是：

@layer B,C,A;
@layer{
  div{
    background: pink;
  }
}
@layer A{
  div{
    background: blue;
  }
}
@layer B{
  div{
    background: orange;
  }
}
@layer C{
  div{
    background: red;
  }
}

這個會是粉紅色的。

以上是 @layer 的初步介紹，目前主流瀏覽器都以支援了，應該有機會之後再實際專案上看到他的應用。