カスケードレイヤー

はじめに

CSSの新機能カスケードレイヤーがいよいよ主要ブラウザでサポートされる

Chrome 99（3/1リリース）、Firefox 97（先月リリース）、Safari（次期バージョン）といった感じのサポート状況

問題

CSSで混乱が発生する原因の1つは詳細度

CSSを記述する順序で適用されるCSSが異なる

詳細度のせいで意図しないCSSのオーバライドの発生

!importantが使用されており、うまく機能しない

その結果、classなどによる無駄な詳細度の設定や無駄な上書き用のスタイルが積み上がっていく

昔は、BEM等のCSS設計で乗り越えてきて、

昨今だと、React等のjsフレームワークを利用したコンポーネント指向＆scopedの組み合わせでなんとかなっている

https://gyazo.com/42f0fa9e6f1e699f11a0322a6e13151e

（引用：coliss）

の様なUIが合った時、従来であれば、.buttonというベースクラスを作成し、

.button--ghost, .button--facebookという.buttonの値を利用したオーバライド用のクラスを作成する為、

CSSの記述順が固定されたり、オーバライドするスタイルを気にしないといけなかった

オーバライド用の!important地獄が発生しだした日には地獄になる

本題

カスケードレイヤーを実際に記述する

@layerのあとにレイヤー名を記述していく。例として、componentsを記述（名称は何でもok）

code:css

@layer components {}

↓このcomponentsに対して、スタイルを定義する

code:css

@layer

スタイルが適用される順

Origin and Importance（!important）

Inline Styles（インラインスタイル）

Layer（レイヤー）

Specificity（詳細度）

Order of appearance（記述の順番）

参考