カスケードレイヤー
high-gはじめに
新機能カスケードレイヤーがいよいよ主要ブラウザでサポートされる
Chrome 99（3/1リリース）、Firefox 97（先月リリース）、Safari（次期バージョン）といった感じのサポート状況
問題
CSSで混乱が発生する原因の1つは詳細度
- CSSを記述する順序で適用されるCSSが異なる
- 詳細度のせいで意図しないCSSのオーバライドの発生
- !importantが使用されており、うまく機能しない
その結果、classなどによる無駄な詳細度の設定や無駄な上書き用のスタイルが積み上がっていく
昔は、Sass + BEM等のCSS設計、今だと、React等のjsフレームワークを利用したコンポーネント指向＆scopedの様なCSS外の仕組みを利用してなんとか乗り越えている。
下記の様なUIがあったとする。
従来であれば、.buttonというベースクラスを作成し、
.button--smallという.buttonの値を利用したオーバライド用のクラスを作成する為、
詳細度やCSSの記述順を考えないといけなかった。
また、オーバライド用の記述に対して、!importantを日常的に使いだした日には地獄が待っている。
本題
カスケードレイヤーは、デフォルトのCSSの仕組みだけで、上記の様な問題を乗り越えやすくする仕組みである。カスケードレイヤーを実際に記述する。（コリスさんの記事をがっつり参考）
@layerのあとにレイヤー名を記述していく。例として、componentsを記述（名称は何でもok）
@layer components {}
↓このcomponentsに対して、スタイルを定義する
@layer components {
.button {
color: #fff;
background-color: #0268cc;
border-radius: 4px;
}
}
次にボタン別のバリエーションを記述する場合に別レイヤーを作成する。
ここでは、variationsとする。
@layer components {
.button {
color: #fff;
background-color: #0268cc;
border-radius: 4px;
font-size: 14px;
line-height: 22px;
width: 160px;
height: 48px;
}
}
@layer variations {
.button--small {
font-size: 12px;
line-height: 18px;
height: 32px;
}
}
そして、components → variationsというスタイルの定義を適用する為に、下記のような記述を各layer記述前に行う。
@layer components, variations;
@layer variations, components; と記述した場合は、スタイルの適用順がvariations → componentsになる。
下記の様に、同じ名称の@layerを別の箇所で定義した場合は、下記の場合だと、.button-smallのすぐ下に.button-fullが追記された形と同じになる。
@layer components {
.button {...}
}
@layer variations {
.button--small {...}
}
/* 500行後 *
@layer variations {
.button--full {...}
}
また、下記のような場合、pに適用されるのは、font-size: 2remである。
カスケードレイヤーには詳細度は関係なく、読み込みが後のもので上書きされます。
@layer base, custom;
@layer base {
#page .prose p {
font-size: 1rem;
}
}
@layer custom {
p {
font-size: 2rem;
}
参考
high-g下記の場合は、一番上の.buttonが暗黙のレイヤーに追加される為、優先的に適用されてしまう。
.button {
border: 2px solid lightgrey;
}
@layer base, components;
@layer base {/* Base styles */}
@layer components {
.button {
border: 0;
}
}