CSSをクエリ言語として捉え直す — DatalogとCSS、そして「再帰的スタイリング」の可能性

4月24日、開発者のEvDC氏が「CSS As A Query Language · evdc.me」と題した記事を公開した。この記事では、CSSをDatalogのようなクエリ言語として捉え直し、さらには汎用プログラミング言語として活用する可能性について詳しく紹介されている。

CSSとDatalogの驚くべき類似性

近年のWeb開発では、CSS Container QueriesやCSS Custom Propertiesなど、「状態に基づくスタイリング」機能が次々と追加されている。しかし著者は、CSSの本質をより根本的に捉え直すアプローチを提示する。

著者は、CSSの基本原理を3つのステップで説明している。「Things（要素）が存在する」「Things の集合を記述できる」「それらの Things に対して何かを実行できる」というものだ。

興味深いことに、この構造は**Datalog**というクエリ言語と本質的に同じだという。Datalogは論理プログラミングの一種で、データベース研究や知識表現システムで使われる言語だ。以下のようなコードを書く：

parent(alice, bob).
parent(bob, carol).
ancestor(X, Y) :- parent(X, Y).
ancestor(X, Y) :- parent(X, Z), ancestor(Z, Y).

これをCSSと比較すると、構造が逆転しているだけで本質は同じだと著者は指摘する：

/* Datalog: color(X, red) :- div(X), class(X, awesome). */
/* CSS: */
div.awesome {
    color: red;
}

現在のCSSの限界と「CSSLog」という思考実験

現在のCSSには重要な制約がある。要素のcolorプロパティを設定することはできるが、colorに基づいて要素を選択することはできない：

/* これは動作しない */
div[color=red] {
    color: blue;
}

著者は「CSSLog」という架空の言語を思考実験として提案する。これは、セレクタが他のセレクタのマッチングに影響を与えるプロパティ（classなど）を設定できる拡張版CSSだ：

div.foo {
    class: +bar     /* クラス bar を追加 */
}
div.bar {
    /* 上のルールが実行された後、この要素は .bar にもマッチする */
}

デザインシステムでの応用例：テーマの伝播問題

この概念の実用性を示すため、著者はデザインシステムでの「テーマ継承」実装という具体例を挙げている。これは現在のWeb開発で非常に身近な問題だ。

「ダークテーマのカード内にある全てのフォーカス可能要素に白いアウトラインを適用したいが、中間にdata-theme="light"を持つ要素がある場合は除外したい」という要件において、通常のCSSでは入れ子レベルごとに複雑なルールを書く必要がある。

CSSLogなら以下のように再帰的な定義でエレガントに解決できる：

[data-theme="dark"] {
    class: +effectively-dark;
}
.effectively-dark > :not([data-theme="light"]) {
    class: +effectively-dark;  /* 再帰的に伝播 */
}
.effectively-dark :focus {
    outline-color: white;
}

不動点による実行モデル

CSSLogがどのように動作するかについて、著者は不動点（fixpoint）という概念で説明している。通常のCSSは1回のパスで処理が完了するが、CSSLogでは：

ベースとなる事実から開始
全てのルールを適用して新しい事実を導出
新しい事実が追加された場合は2に戻る
何も追加されなくなったら終了

この仕組みが機能する理由は単調性（monotonicity）にある。事実を追加するだけで削除しないため、有限回で必ず終了することが保証される。

現実への応用と関連技術

記事の最後で著者は、この概念が既に様々な形で実装されていることを指摘している。**DatomicやDifferential Datalog**といったシステムがその例だ。

CSS分野でも、既存の新機能は既にこの方向性の一歩と言える。CSS Container Queriesでは要素が自身のコンテナの状態に基づいてスタイルを変更でき、CSS Custom Propertiesも値の伝播という点でCSSLogの概念に近い機能を提供している。

さらに、**CSS Cascade Layers**のような仕様も、スタイルの適用順序をより宣言的に制御する方向性を示しており、著者の提案する「CSS as Query Language」の思想と共通点がある。

詳細はCSS As A Query Language · evdc.meを参照していただきたい。