Yeah I'm fairly proficient with CSS, having written it for over a decade, and as I skimmed the article I found myself getting a bit overwhelmed. Seems like quite a bit of effort.

For years I've been working on a programming language for UI designers, and this was one of the stumbling blocks for me. It's definitely a hard problem.

My solution was to enforce unique names for every element, and then you could use a simple syntax for describing positioning constraints between them. For example:

  BlueSquare {
    width: 100px
    height: 100px
    top: 0px
    left: 0px
  }

  RedSquare {
    width: 100px
    height: 100px
    top: @BlueSquare.bottom + 10px
    left: @BlueSquare.right + 10px
  }

This code would anchor the red square to the bottom/right of the blue square, with a 10px spacing between the two. Super simple! Far more difficult to implement a backend that satisfies this of course, which is why I haven't made much progress lol.