要約

  • W3Cが2021年1月19日に公開したCSS Cascade Level 5の最初の草案には@layerがあり、作者はスタイル群の優先順を明示できるようになった。
  • 2022年1月13日の候補勧告スナップショットでは、通常の宣言は後のレイヤーが勝ち、!important付きの宣言は前のレイヤーが勝つ。レイヤー外の通常宣言は暗黙の最後のレイヤーに入る。

一つのボタンを三つのファイルが取り囲んでいた。初期化用のスタイルは控えめな色を望み、部品集はブランド色を指定し、ページ側には急ぎの変更がある。ブラウザーには衝突を解く規則が備わっている。人間はその規則を使ってセレクターを長くし、さらに強いセレクターが現れるとまた足した。誰の発言を先に扱うかを決めないまま、毎回声量を競っていたのである。

2021年1月19日のW3C最初の公開草案は、カスケードレイヤーと@layerを導入した。作者は規則を集まりに分け、その集まりの順序を明示できる。W3C CSS作業部会の発表は、各レイヤー内のセレクターや詳細度をいじらず、レイヤー間の順位を決められる点を強調した。ファイルが偶然どの順番で並ぶかに任せる仕事も減る。会議が始まる前に席順が決まる。

例えば、初期化、共有部品、サイト固有の調整を別々のレイヤーに置く。通常の宣言が同じプロパティを争うなら、後に並ぶレイヤーが優先される。セレクターの詳細度は、その後の比較で働く。早いレイヤーの複雑なセレクターが、遅いレイヤーの簡単なクラスに負けることもある。チームはローカルの判断を示すために、#idや!importantを山のように積まずに済む。

ただし!importantを付けた宣言同士では、レイヤーの順位が逆になる。先のレイヤーが後のレイヤーに勝つ。2022年1月13日の候補勧告スナップショットは、通常の宣言と重要な宣言の二つの向きをカスケードの比較順に記した。ボタンの色を調べるとき、まずどちらの勝負が行われているかを確認する必要がある。詳細度だけ見ても答えには届かない。

明示的なレイヤーに入っていない規則にも席がある。2022年の形では暗黙の最後のレイヤーに置かれ、通常の宣言なら名前付きレイヤーより優先される。古いパッチがレイヤーの外に残っていれば、立派な計画を飛び越える。2021年8月29日の作業草案は、最初の公開草案からレイヤー外の規則の扱いを変えた経緯を記録している。席順の作り方も議論の途中で調整された。

同じ8月の草案にはrevert-layerも登場する。あるプロパティを前のレイヤーが与える値へ戻すための語だ。レイヤーは入れ子にもでき、読み込むスタイルをレイヤーに割り当てる道も整えられた。共通基盤とサイトの選択をどう重ねるかを、セレクターの長さではなく構造で語れるようになった。

W3Cの公開履歴は2021年初頭の草案から2022年初頭の候補勧告スナップショットまでを並べる。レイヤー外の扱いや巻き戻しの語はその間に洗練された。大きなサイトでは、初期化、ライブラリー、部品、応急修正が一緒に働く。それぞれが何を決める権限を持つかを表に出したのが、この変更の核だった。

最後にボタンの色は一つに定まる。レイヤー内では詳細度も引き続き働く。ただ、チームは「なぜこの色か」と聞かれたとき、金曜の修正をした人を探し回る代わりに席順を指せるようになった。