Man, this brings me back. I started working on the web a couple years after Eevee did. I remember all of the pain points he did. (One note: when I was learning in 2001-2002, most of the tutorials and books still used <FONT>, <CENTER>, <BIG>, etc., even though CSS was around. I remember using CSS was extremely painful because of IE5, which was the default on my Win98 machine, so I didn't bother really trying till hearing about Firefox - I mean Phoenix.)
I also remember that centering any block element within another block element with CSS was somewhat absurd. The trick was to do something like
And of course, there was no way to vertically center an element within another without hacks and HTML detritus that served no semantic purpose. It was almost worse than the table-based layouts.
That's the only other painful thing I vividly remember behind what Eevee posted.
Flexbox and Grid have made things a lot better, but I still run into weird inconsistencies and exceptions frequently. (The latest involved trying to set `max-height` on a `resize: vertical` element, and I couldn't get it to work without hacks or JavaScript. Chrome implements resizing by overriding the width or height on an element's style attribute.)
Flex has indeed figured it out, I use it for everything now and rarely touch margin: auto unless I'm being lazy or there's a very simple usecase.
But that said Flex still very much classic CSS: the awkward naming schemes, the excessive options for each parameter, the mixing of different options available, etc... it's still very much CSS in all it's quirky dirtiness.
CSS Grids kind of shocked me that they weren't entirely convoluted.
Maybe it's the design-by-committee stuff but even as CSS has gotten better: it still took way too long and it's still very weird. Maybe like JS this will slowly no longer become true, but I'm kind of happy I grew up without Flex/modern CSS because I'm unafraid of that quirkiness.
I also remember that centering any block element within another block element with CSS was somewhat absurd. The trick was to do something like
.centered { margin-left: auto; margin-right: auto; }
And of course, there was no way to vertically center an element within another without hacks and HTML detritus that served no semantic purpose. It was almost worse than the table-based layouts.
That's the only other painful thing I vividly remember behind what Eevee posted.
Flexbox and Grid have made things a lot better, but I still run into weird inconsistencies and exceptions frequently. (The latest involved trying to set `max-height` on a `resize: vertical` element, and I couldn't get it to work without hacks or JavaScript. Chrome implements resizing by overriding the width or height on an element's style attribute.)
Wonderful post! Would love to see more.