【カスケードレイヤー】

カスケードレイヤー(@layer) とは?

💡 CSSの優先順位争いに終止符を打つ、レイヤーという名の交通整理係
📌 このページのポイント
カスケードレイヤー(@layer)の優先順位 従来:詳細度の戦い .container .btn = 詳細度 0,2,0 #main .btn = 詳細度 1,1,0 勝ち !important で無理やり上書き... @layer:レイヤーで整理 @layer reset @layer framework @layer custom レイヤーの順序 > 詳細度 customレイヤーのスタイルは、詳細度に関係なくframeworkより優先される
カスケードレイヤーのイメージ
ひよこ ひよこ

@layerって何のためにあるの?CSSの書き順で優先度が決まるんじゃなかったっけ?

ペンギン先生 ペンギン先生

確かにCSSは後に書いたものが優先されるけど、詳細度(セレクタの強さ)も絡むから複雑になるんだ。@layerを使うと、詳細度に関係なくレイヤーの順番で優先度を決められるよ

ひよこ ひよこ

どんなときに便利なの?

ペンギン先生 ペンギン先生

たとえばBootstrapやTailwindなどのCSSフレームワークを使うとき、フレームワークのスタイルを下位レイヤー、自分のスタイルを上位レイヤーにしておけば、詳細度を気にせず簡単にオーバーライドできるんだ

ひよこ ひよこ

@layerの中に@layerを作ることもできるの?

ペンギン先生 ペンギン先生

できるよ。ネストして「base」の中に「reset」や「defaults」みたいなサブレイヤーも定義できる。大規模なCSSアーキテクチャほどこの階層化が効いてくるね

ひよこ ひよこ

!importantとの関係はどうなるの?

ペンギン先生 ペンギン先生

面白いことに、@layer内の!importantはレイヤーの優先順位が逆転するんだ。下位レイヤーの!importantが上位レイヤーの!importantより強くなる。これはCSS仕様のカスケードの順序に基づいた仕様で、意外と知られていないポイントだよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「カスケードレイヤー」って出てきたら「CSSの優先順位をグループで管理する仕組み」と思えればだいたいOK!
📖 おまけ:英語の意味
「Cascade Layers」 = カスケード(優先順位の段階)のレイヤー(層)
💬 CSSの「C」はCascadingの頭文字。そのカスケード(優先順位の流れ)をレイヤー(層)で制御するという意味だよ
← 用語集にもどる