CSSはもはや「クエリ言語」？CSSだけでロジックを組む驚きの手法

最近、CSSを使って複雑なデータ操作やロジックを実現するアプローチが話題になっています。従来のスタイル定義にとどまらない、CSSを「クエリ言語」のように活用する最新のテクニックや概念について解説します。CSSの進化により、これまでJavaScriptに依存していたUIの状態管理も、CSSだけで完結させられるケースが増えています。フロントエンド開発の常識が、今まさに塗り替えられようとしています。

これが解決するシナリオがいまいちピンとこないな。

例えば、現時点でも子要素に基づいて親要素を条件付きで変更することはできるよね。例として、このpreタグのパディングを16pxにするか0pxにするか。直下の子供がcode要素なら0にする、みたいな。

  pre {
    padding: 16px;

    &:has(> code) {
      padding: 0;
    }
  }

個人的にはXPathよりもCSSセレクタの方がずっと書きやすいと思う。最近、PHPの新しいDOM APIを使うと、HTMLとCSSセレクタをネイティブで扱うのがすごく簡単になるという話をしたんだ（以前はCSSをXPathに変換する必要があったからね）。[1]

CSSは本来ブラウザでの使用やスタイリングがメインだから、XPathみたいにテキスト内容に基づいて要素を選択するような便利な機能がないのは残念だよね。聞いた話では、以前提案されたことはあったけど、ブラウザのレンダリングコンテキストでパフォーマンス上の問題を引き起こす可能性があるということで仕様には盛り込まれなかったらしい。

[1] https://speakerdeck.com/keyvan/parsing-html-with-php-8-dot-4... (https://speakerdeck.com/keyvan/parsing-html-with-php-8-dot-4?slide=40)

何年か前にカンファレンスでこれを見たのを思い出したよ。
https://github.com/braposo/graphql-css (https://github.com/braposo/graphql-css)

当時はジョークとして発表されていたけど、異なるコンテキストでパターンをコピーして再適用する方法や、そこから予期しない可能性が生まれるかもしれないという指摘の仕方はすごく好きだったな。

pyastgrep https://pyastgrep.readthedocs.io/en/latest/ (https://pyastgrep.readthedocs.io/en/latest/) というプロジェクトなら、Pythonの構文をクエリするための言語としてCSSセレクタが使えるよ（デフォルトはXPath）。

例：

pyastgrep --css 'Call > func > Name#main'

いいね

うーん。CSSは嫌いじゃないけど、どんどん複雑になっていくのはどうもね。

理屈は分かるよ。プログラミング言語の方が、そうじゃない言語よりも強力なのは間違いないから。でも、何でもかんでも複雑にしようとするより、HTMLとCSSとJavaScriptを丸ごと置き換えるような何かが現れてほしいって思っちゃう。HTML5の新しい要素のほとんどを使ってないのは、Webページを微細に説明するための専門的なタグなんて使う意味を感じないからだ。結局「divタグがあって、そこにユニークなIDが付いてる」っていう、まさにほとんどのコンテナの正体はこれで十分だという考えに落ち着いた。こういうIDにエイリアスを付けて、単なるナビゲーション用のアンカーとして使いたいとさえ思ったよ。

    [data-theme="dark"] [data-theme="light"] :focus {
      outline-color: black;
    }

こういう書き方も嫌い。これ全部を脳内で処理するのに時間がかかりすぎる。もうシンプルでエレガントとは言えないよ。

一方で:

   h2 {
     color: red;
   }

これならシンプルだよね。

    So ancestor(X, Y) :- parent(X, Y). means: “For all possible values of X and Y, X 
    is an ancestor of Y, if X is a parent of Y.”

見ての通り、もうこんな風に考えること自体したくない。そもそも :- って何だよ、スマイリーかよ。

    @container style(--theme: dark) {
      .card { background: royalblue; color: white; }
    }

この辺で完全に冷めたわ。

CSSの問題は、余計なものを詰め込みすぎてる人が多すぎることだと思う。昔はうまく機能していた標準が、時とともに劣化していくのを見るのは奇妙な気分だよ。

あれ……それってJQそのものじゃないの？

面白いけど、いや、なしでしょ。/s

これといった使い道が思いつかないけど、かっこいいね。

今のLLMってCSSが全然ダメなんだよね。これを試して、LLMにとって推論しやすいかどうか確かめてみるのはすごく興味ある。