CSSは規則の中に規則を入れた。最後の塗装だけが迷子になった

Summary

• 2021年のW3C初公開草案は、親規則の内側に子規則を置き、&で親を参照する仕組みを示した。当時、入れ子の規則より後に書かれた宣言は無効だった。
• 2023年草案は規則と宣言の混在を許したが相対的な順序を保存しなかった。2026年草案は入れ子の宣言規則で記述順を保つ設計を示した。

編集者がニュースカードの見た目を整える。カードの枠、見出し、ボタンの規則を同じ場所で読みたい。ボタンの規則をカードの中へ移せば、ファイルの構造が画面の構造に近づく。そこで内側の規則の下に背景色を追記した。紙の上では最後の一筆である。ブラウザーにとっても最後なのか。家の中に小部屋を作った途端、後から来た塗装職人の順番が争点になった。

2021年8月31日の最初の公開草案は、子のセレクターを親との関係で解釈する設計を記した。&は内側から親を指す記号だ。直接入れ子にする形式と、より自由な位置でセレクターを書ける@nestも並んでいた。二つの入口が必要だった背景には構文上の難問がある。color:hoverという並びを見た解析器は、セレクターを読んでいるのか、宣言の始まりを読んでいるのか、すぐには決められない。草案は先を際限なく読む必要が生じ得ると説明した。

同じ2021年草案では、宣言は入れ子の規則より先に並べる決まりだった。後に置いた宣言は無効として無視される。読みやすさのため一行を下へ動かすと、色そのものが消える。入れ子は許されたが、職人の入場時刻は厳格だった。

2023年2月14日の草案からは、独立した@nestの入口が姿を消す。宣言と入れ子の規則を交互に書けるようになった。一方、草案はそれらの相対的な順序を保存しないと述べる。職人は部屋に入れる。それでも作業票に書かれた順番が計算にそのまま残るとは限らない。問題は「書けるか」から「書いた順に効くか」へ移った。

2026年1月22日の草案は、規則の後や間にある宣言を暗黙の入れ子の宣言規則で包み、位置を保存する。単純に& { ... }で包む方法では、擬似要素や詳細度の振る舞いまで変わる。草案はその理由を示し、途中で検討された@nestの包み方から現在の方式に至る変更も記録した。見えない帳簿を丁寧に作ることで、見える一行の順番を守ったわけだ。

W3Cの公開履歴には2021年、2023年、2026年の三つの節目が並ぶ。入れ子構文は、関連する規則を近くに置くための道具だ。その価値を支えるのは、親子のつながりと記述順をブラウザーが取り違えないことにある。編集者が部屋割りを決め、ブラウザーが塗装の順番を記録する。小さなボタンの色に、引っ越し業者の気まぐれを持ち込まずに済む。