CSS as a Query Language (opens in new tab)

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

I feel like we need a name for css-the-syntax (and maybe -the-semantics) as separate from css-the-body-of-rules/functions/units/etc-defined-by-csswg.

There's juice in it, but it's hard to talk about and survey other uses without just searching GH for code using css parsers and just see what kind of shenanigans people are up to.

I've been playing around with a weird thing that's kinda like a template engine, but driven by a mix of a lightweight node-based markup language, css selectors for expressing what goes into the template, and a css-alike for controlling exactly how all of these parts come together.

Reminds me of seeing this presented at a conference years ago 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/ can use CSS selectors as a query language for Python syntax (default is XPath).

e.g.:

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

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

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 cant think of any real use for this -> but cool

Ummm... Isn't that just JQ?

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.

Nice

This is neat, but no. /s