ユーティリティ CSS フレームワークが内部で @layer を使うようになり、自前のスタイルとの優先順位が以前と変わった。理解が曖昧なまま書いていて、二度同じ場所で詰まったので記録しておく。
誤解していた規則
詰まりの原因は単純で、レイヤーに属さないスタイルは、どのレイヤーのスタイルよりも優先されるという規則を逆に覚えていたことだった。フレームワークのユーティリティは layer 内にあるので、レイヤー外に書いた雑な上書きが specificity に関係なく勝ってしまう。「なぜか効きすぎる」ときは、まずここを疑う。
レイヤー構成を読む
もう一つの教訓は、使っているフレームワークのレイヤー宣言を一度読んでおくことだった。
@layer theme, base, components, utilities;この一行が優先順位の全体像で、後ろにあるレイヤーほど強い。自前のコンポーネント様式は components に入れれば、ユーティリティでの微調整が意図どおり上書きできる。
まとめ
カスケードレイヤーは「specificity の綱引きを設計に置き換える」仕組みで、規則自体は少ない。レイヤー外が最強・宣言順が全て、の二点を体に入れてからは詰まらなくなった。