Comment by evnc

yeah I mean, to be clear, I'm less proposing "What if we add even more syntax and semantics to CSS" and more "what if we steal ideas from CSS, notice their similarity to logic / relational query languages, and use them to build something new". I probably could have articulated some of this better.

eg this example:

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

means, in English/pseudocode, roughly: "If you have an element X with attribute data-theme="dark", and X has a child Y with attribute data-theme="light", and Y is focused, then the outline-color of Y is black".

so we could write this also as, e.g.:

  outline-color(Y, black) if 
    data-theme(X, "dark") and
    parent(X, Y) and
    data-theme(Y, "light") and
    focused(Y)

that's Datalog, except I went ahead and replaced :- with "if" and "," with "and".

if we want even more syntax sugar, we could do:

  Y.outline_color := black if
    X.data-theme == dark and
    Y.parent == X and
    Y.data-theme == dark and
    Y.focused

imagine `X.attr == val` <==> `attr(X, val)` as a kind of UFCS for Datalog to make it palatable to Regular Programmers, right

the declaration and scope of these variables is implicit here; if you want something even more ALGOL-family, we could write

  forall Y {
    Y.outline_color := black if 
       Y.data_theme == "dark" and
       Y.focused and
       Y.parent.data_theme == "light"
  }

here we've explicitly introduced Y, and made one of our joins implicit, and it looks even more like Regular Programming now, except the Datalog engine (or equivalent) is kind of running all these loops for you, every time one of their dependencies changes, in an efficient way ...