The fight from standard bodies against scoped CSS has lead to the current situation where every site's CSS evolves to be a mess where nobody is even sure if the rules are used, but can't delete them.
Sprinkled with a tiny bit of specificity classes for state, it combines best of both worlds.
You have to name things, then you don't have to apply multiple rules.
You can fairly easily turn tables into blocks: https://littlegreenviper.com/miscellany/stylist/another-reas...
Also, I use “display: table” all the time in my work. It’s the best mode for layout that fits content.
i am not saying table based design is bad. but we did originally move away from it for legitimate reasons that seem to have been largely forgotten, and as a result we now have developers who build json theme files and react frameworks that wire “darkmode=true” individually through every component instead of just using css for what it was designed to do: to exactly be a theme configuration format.
a lot of where things have gone wrong is CSS started to be used for layout, which was originally a hack, abusing the float property to do things it was never designed to do. and css has never gotten good at it, because fundamentally layout is about relationships between elements, while CSS is stuck only ever specifying properties ON elements. sure we have display table, flexbox and css grid, but css is an incredibly awkward and unnatural way to express those concepts. app frameworks deal with layout seperately from colors and fonts, which is how it should be done. and so this is why it’s all hacks and workarounds in css land. it doesn’t have to be this way. but it’s how it is.
The layout is part and parcel of the style. CSS gives you 7 different layout modes to choose from (normal, table, float, positioned, multi-column, flex and grid). There is more than enough here to implement any sort of layout problem you face, from using 15 year old table and flex hacks to cleaner modern approaches like flex.
> while CSS is stuck only ever specifying properties ON elements
The "position: relative" (CSS1), float and flex are all about positioning elements relative to one another. Other properties like margin, align and float are also about positioning items relative to one another.
> but css is an incredibly awkward and unnatural way to express those concepts
I think CSS is pretty easy and straightforward to reason about, once you decide that it is worth investing some time and effort in learning. It really always surprises me how some really smart people just do not get CSS, and I think it is not about ability, but attitude. CSS is dismissed as "that thing for designers", and calling CSS a programming language is usually met with smirks. That is the real problem with CSS, its reputation.
I can certainly agree with you. Some of the dynamically-generated markup can be a nightmare.
"ZenPsycho." Great screen name.
There was a book written in the late 90s, which presented a method that allowed people to take a document generated in a graphics program like MM Fireworks (IIRC) and then use table rows/columns to cut up that image and create layout with more varieties of graphical elements (like using a "corner" GIF to create a rounded box).
That markup, while very useful for creating "neat" looks, was incredibly difficult to modify once it was built.
But, specifically, that's what people are railing against when they "freak out" about tables as a layout tool... not using tables for tabular data (which is, of course, just fine unless you need to reflow stuff based on screen width).
Umm... I've been designing Web sites since the mid-'90s. I used to do that very thing.
It is my shame (actually, I have many marks of shame, but we'll pretend I have just the one, for now).
That said, I also figured out how to make these "boxes" extremely flexible. I write about that in one of the links that I mentioned (https://littlegreenviper.com/miscellany/stylist/another-reas...). In that article, I describe both a "fixed," div-based "framed" table, and a flexible one; based on archaic table layout.
One advantage of having worked on sites back then (and there weren't many advantages), was that the browsers were radically different from each other, and Web designers learned to make sites that could maintain presentation in many different browsers. We generally had to do it by hand, as there wasn't really much in the way of libraries, or even prior art. We had to make it up as we went along.
I know, I know..."OK, Boomer." But it was quite helpful in understanding what was going on at the base level, and those lessons carry forward to this day.
I am not a professional Web designer. I make my own sites, and a couple of ones for NPOs, but they aren't fancy, and won't help anyone win "Buzzword Bingo." They just work fairly well, and are quite responsive.
EDITED TO ADD: You are probably thinking about this book, which became the bane of modern Web designers by the mid-oughties: https://books.google.com/books/about/Creating_Killer_Web_Sit...
