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

CSSの宣言を層に分け、層どうしの優先順位を管理する仕組み。@layerで順序を先に宣言できる。同じ由来・重要度などの条件で、レイヤーの順序はセレクタの詳細度より先に比較される。通常の宣言と!important付きでは、層の優先順が逆になる。

ひよこ

@layerを使うと、CSSの何を整理できるの？

ペンギン先生

スタイルのまとまりごとの優先順位だよ。例えば@layer base, app;と先に宣言すると、通常の宣言ではappがbaseより優先される。同じ由来や重要度などの条件なら、層の違いを詳細度より先に比較するんだ

ひよこ

詳細度は、もう考えなくていい？

ペンギン先生

同じ層の中では、セレクタの詳細度や書き順も使うよ。また、!importantやインラインスタイル、ブラウザーや利用者のスタイルなどもカスケードに関わる。@layerだけで全部の優先順位が決まるわけではないんだ

ひよこ

レイヤーに入れなかったCSSは、どうなるの？

ペンギン先生

同じ由来の通常宣言なら、層の外の宣言が層の中より優先されるよ。ライブラリを上書きしたいときも、自分のCSSだけを層へ入れると逆効果になる場合がある。取り込む側も@importのlayer指定などで整理しよう

ひよこ

!importantを付けると、順番が変わるの？

ペンギン先生

そうだよ。同じ由来で!important付き同士なら、先に定義した層が優先される。層内の!importantは層外の!importantより優先される。通常宣言同士の順序とは逆で、!important付き宣言は通常宣言より強いんだ

ひよこ

途中で同じレイヤーを書いたら、順番も移る？

ペンギン先生

名前が最初に現れたときの順序は変わらず、その層にルールが追加されるよ。層を入れ子にもできる。最初に順序を宣言しておくと、別ファイルにルールを追加しても、層の意図を共有しやすいんだ

まとめ：ざっくりこれだけ覚えればOK！

「カスケードレイヤー」って出てきたら「CSSを層に分け、層どうしの優先順位を管理する仕組み」と思えばだいたいOK！

誤り・わかりにくい説明を報告する