I doubt it's ever coming but to really separate layout from content requires the layout tree and the content to be separate trees. Right now there's effectively only 1 tree, the DOM and CSS for the most part is just meta data on that tree.

GRID requires things to actually fit a grid. If your grid isn't easily divided you add nested grids. But once you nest grids you can no longer seperate layout from content since the nested grid tree (layout) and the DOM tree (content) are tied together.

I wrote an article[1] about this. It's aimed towards intermediate CSS peeps trying to understand how to organize CSS. It focuses on BEM mostly but still offers a decent look into managing CSS

[1]: https://blog.kdamball.com/2017/12/28/maintanable-css-archite...

Thanks for the link, good and useful article indeed. What I miss from it though is an explanation of how to debug bundled or transpiled code. I am aware of the existence of source maps, but I've never used them. Until I am able to debug my code efficiently with source maps I cannot adopt bundling nor transcompilation for my projects. Does anyone have a good quality article or video that explains this?

I never used them myself but i thought the point of source maps was that the major browsers understand them; you load them in the browser on command, and can then debug from there, as you would normally with unbundled code

I grew up with floats and clearfixes, and while flexbox does a few things I couldn't do before I still find myself pulling up the flexbox cheat-sheet to get the correct syntax every single time.

Wow, I feel like going back in time and reading this to a younger self. Excellent writeup.