|Some context: It seems like web development is stuck in a frustrating limbo between utilizing HTML presentationally, while trying to maintain a balance with ARIA/accessibility and so-called semantic markup. There's a dissonance that bugs me - and of course call out any ignorance or insularity here - but I really wish there were a purely graphical/animated layer, with a semantic construction of sorts "super-imposed" on top to ensure accessibility and bot-digestible metadata.|
Brings me to the title. Aside from wrapped text, this graphical layer could be pure SVG + CSS&JS. Why constrain designers to little CSS hack triangles and circles when there's an almost limitless vector graphics technology available instead?
I predict even with Houdini, CSS won't be rich enough to eliminate presentational markup for complex web applications. I know about role="presentation", but that seems to be an awkward compromise to avoid an explicit separation of concerns:
'Inspect element' any sophisticated web app and you'll see divs inside of divs inside of divs with class="color-blue border-2px border-gray background-number-seven". Slight exaggeration, but the separation of concerns doesn't exist.
I know the spirit of the web is "hackish" in that the standard quo is more of a gradual, messy evolution that gets there eventually rather than giant leaps which may not "stick the landing". However, to me it appears that some organization of _presentational_ aspects in particular is really needed. I know WebComponents, Houdini, and other "rationalize the platform" efforts' goals include this in part, but it doesn't seem like a nice graphical/animation layer which would sidestep DOM performance issues is in the cards.
This was off the top of my head, but I hope I got the gist across. I welcome any feedback.