@layer（カスケードレイヤー）

2023.04.06

カスケードレイヤー「@layer」を使用すると、CSSの詳細度とスタイルの順序をカスケード内で明示的にレイヤー化（階層化）できる。CSSのオーバーライド（優先）、リセットやサードパーティの外部CSSファイルの扱いが、今までよりはるかに楽になる。

@layerを使用すると、それぞれのスタイルの詳細度をより明確にすることができ、すべてのCSSが同一平面上にある場合、数値的には詳細度が低くても、カード内リンクのスタイルがポスト内リンクのスタイルをオーバーライドできる。これは、カスケードの優先順位によるものである。レイヤー化されたスタイルは、新しいカスケード「プレーン」を作成する。

@layer base {
  a {
    font-weight: 800;
    color: red; /* 無視されます */
  }
  .link {
    color: blue; /* 無視されます */
  }
}
@layer typography {
  a {
    color: green; /* すべてのaに適用されます */
  }
}
@layer utilities {
  .pink {
    color: hotpink;  /* すべての.pinkに適用されます */
  }
}

上記の例では、classがないリンク、.linkがあるリンク、.pinkがあるリンクなど、リンクがいくつかある。CSSには3つのレイヤー（base, typography, utilities）がある。
すべてのリンクはグリーンかピンクになる。CSSの仕組みを解説すると、.linkはaよりも高いセレクタレベルの詳細度が高いですが、baseレイヤーよりも優先順位の高いtypographyレイヤーのaにカラーのスタイルがある。グリーンのルールがブルーのルールの後のレイヤーにある場合、a { color: green }は.link { color: blue }をオーバーライドする。
レイヤーの優先順位は要素の詳細度に勝る。

【参考】
https://coliss.com/articles/build-websites/operation/css/css-cascade-layers-are-coming.html

inserted by FC2 system