カスケードレイヤー
CSS のカスケードに「詳細度より上位」の判定段階を加える仕組み。ルールがどのレイヤーに属するかが、詳細度より先に決まる。
よくある悲劇はこうだ。外部ライブラリの .btn.btn-primary が自分の .btn に勝ってしまい、より詳細なセレクタで対抗し、さらに重ね、最後は !important に行き着く。@layer reset, library, components, utilities; と先頭で順序を一度宣言すれば、最後のレイヤーにある単純なクラスセレクタが最初のレイヤーのどんなルールにも勝つ。順序はルールの記述位置ではなく、レイヤー名が最初に現れた位置で決まるため、import の順番は問われない。意外な点として、どのレイヤーにも属さないスタイルは、レイヤー内のスタイルすべてに優先する。2022年以降、主要ブラウザすべてが対応している。