> You don't 'style' pages, you 'construct' and 'architect' them.
> I think that understanding this is one of the key differentiators between developers who are good with CSS and those that struggle.
Yeah, no.
HTML is a single-root hierarchy whose only primary job is to display text and maybe some images. That's it and it pretty much sucks even at this job.
CSS is and will remain a bunch of hacks trying to force the web page into something it's not. Saying that CSS and HTML are meant to be used together to construct and architect pages is some serious re-writing of history and evolution of CSS and some impressive mental gymnastics.
For a great immediate overview why that is, it's enough to look at this page: https://csstriggers.com When changing text-shadow causes your entire page to reflow and repaint, there's no "architecting" or "constructing". It's piling hacks on top of each other in the hopes it somehow works.
For most of its life since inception in 1996 CSS was nothing but simple styling of HTML pages. There were a few feeble attempts like `display:float` and `position:absolute` to pretend it's not, but the enduring resilience of the Holy Grail kept obliterating that idea. This changed around 2008 with the meteoritic rise of mobile phones and mobile apps (thanks, Apple and Google). It still took w3c 5 years to come up with a solution that could barely place boxes in a relative position to each other without increasing developer suicide rates. I'm talking about flexbox, of course.
Side note: Terrainformatica's Sciter had already had a solution to this for several years, and it was simpler, faster, and required significantly less cognitive load: [1] Not to mention Cassowary which was proposed all the way back in 1999 (can't find the link now).
I think it took MS and then w3c a combined of 10 years to get Grid off the ground.
And all that to be able to finally say: hey, we can barely position an element vertically. Of course, they still can't, as the OP link demonstrates: you need a brand new layout module + a brand new alignment directive to achieve something most GUI libraries in the world have had since Palo Alto's Xerox in 1979. And yeah, it still has cons that has to be remedied by "Gentle Flex".
And, of course, all of this is as brittle as the tail of Prince Rupert's drop. You even glance at it sideways, and it breaks in countless unimaginable ways. Attempt a slightly different layout? Just lift the layout with the markup and attempt to place it in a different position on the page? Adjust sizes in the most minuscule way? Place these things side-by-side? Oh, great constructing and architecting work guys, everything is broken.
And, of course, it cannot be in any way, shape or form properly refactored because it's a flat system where everything is global, styling a single tree tailored to display text and images.
[1] https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.... and https://terrainformatica.com/2018/12/11/10-years-of-flexboxi...
From last link:
--- start quote ---
As a result 12 (sic!) new flexbox-only-properties were added to already huge CSS property namespace (200 properties and counting). All that just to make FlexBox anyhow useful.
But the biggest problem of the solution is that the flexbox breaks existing CSS box model – dimensions of elements are now defined not just by width/height properties but bunch of others like align-items and align-self.
Go figure out why “align” property shall change dimensions and why explicit height:100px declaration shall be ignored
--- end quote ---