主要ブラウザで使える！CSS Cascade Layers で新しいCSS設計の手法を考える | サイボウズ フロントエンドエキスパートチーム

Chrome99に新機能として CSS Cascade Layers が実装され、Firefox、Edge、Safari といった主要ブラウザで CSS Cascade Layers が使えるようになりました。 CSS Cascade Layers とは CSS の仕様において、要素にどのスタイルを適用するかはざっくりと次のような優先順位で決定されていました。(カスケード順を省いて簡略的に記述しています) !important インラインスタイル セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの ここに CSS Cascade Layers が導入されると次のように変わります。 !important インラインスタイル Cascade Layers セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの 従来の CSS が抱える複雑な詳細度の管理 どのスタイルを適用するか判断

[shingo-sasaki-0529]

コンポーネント指向でセレクタのスコープが制限されていればそんなに必要としないイメージあるんだよなぁ。CSSフレームワークのスタイルを安全に上書きできるのは良さそう。

[kkeisuke]

“CSS フレームワークにも Cascade Layers は使える”

[Shisama]

CSSの@layerについてサンプル付きの解説です！