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

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

Not sure I follow the scenario this would solve.

For instance, currently you can conditionally change a parent based on its children. For example, this pre could either have 16px or 0px of padding. Zero when its direct child is a code element.

  pre {
    padding: 16px;

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

I find CSS selectors a lot easier to write than XPath. I recently gave a talk on how PHP's new DOM API makes working with HTML and CSS selectors natively very easy (previously you had to convert CSS to XPath).[1]

It's a shame that because CSS is still primarily for browser use and styling, we don't get nice things like the ability to select based on text content like we can with XPath. My understanding is that this was proposed but didn't make it into the spec because it could lead to performance issues in a browser rendering context.

[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)

Reminds me of seeing this presented at a conference years ago
https://github.com/braposo/graphql-css (https://github.com/braposo/graphql-css)

It was a joke but I really like the way it pointed out how we copy and reapply patterns in different contexts and that might enable unexpected things.

The project pyastgrep https://pyastgrep.readthedocs.io/en/latest/ (https://pyastgrep.readthedocs.io/en/latest/) can use CSS selectors as a query language for Python syntax (default is XPath).

e.g.:

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

Nice

Hmmm. I kind of like CSS but I hate the creep-up of complexity.

It's not that I don't understand the rationale - any programming
language offers more power than a non-programming language. But
I'd rather think here that something else could instead replace
all of HTML, CSS and JavaScript, rather than constantly wanting
to make everything more complex. I don't use most of the new
elements in HTML5, largely because I don't see the point in
using specialized tags for micro-describing a webpage. I succumbed
to the "it is a div-HTML tag and it has a unique ID"; that's what
I think mots of those containers actually really are. I even wanted
to have aliases to such IDs, simply to use as navigational href
intralink.

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

And I also don't like this. It takes my brain too long
to process all of that. It is no longer elegant and simple.

On the other hand:

   h2 {
     color: red;
   }

That is still simple.

    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.”

See - I already don't want to have to think in such terms. What is the :- anyway, looks like a smiley.

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

I stopped there.

I think this is a problem with CSS - too many people are
ruining it. It is strange to see how standards that used
to work, are degraded over time.

Ummm... Isn't that just JQ?

This is neat, but no. /s

i cant think of any real use for this -> but cool

LLMs suck at CSS now, very tempting to try this and see if its simpler for LLMs to reason about