Hell Yes CSS

The biggest thing missing in “display: table” is “colspan”, allowing a table cell to take up multiple columns of the table. That can be a big deal with some layouts. One workaround is to use “position: absolute” inside a CSS table cell to have an element which can span more than one table column.

This isn't fully formed in my mind yet so go easy:

Intuition is linked to elegance, an elegantly designed language is intuitive. An elegant language is one that starts with a few core principles and from that derives the rest of the language. Lisp is an example of a programming language that does this beautifully well.

Usually (always?) such core principles themselves are taken from mathematics. After all, maths is heavily engaged in the business of elegance.

CSS doesn't feel like it's built in this way. When you read a tutorial it doesn't begin with: "these are the fundamental concepts of CSS", rather it feels more like a hodgepodge of lots of different ideas and when they intersect you end up with confusion.

Part of that is for sure the nature of the evolution of CSS. But I don't see any "core" of CSS that you could extract that would be elegant and intuitive now.

I think programmers develop this strong instinct for when things "make sense" in that they're intuitive and elegant. It's like taste. CSS leaves a bad taste.

The best comparison I have for how it could be are the UI layouts of Java, Android, iOS. Java and Android aren't great tbh (don't have much experience with iOS) but at least you can see the design behind them.

It feels like something should begin "there are these elements. each have a bounding box. to see how bounding boxes are calculating for text etc you can deep dive into docs. Anyway, these bounding boxes may also be enlarged (through padding etc.). Now, each box has three properties that define its interaction with other elements..." like a maths class and not "if X is inside Y then you can set Y to make X appear on the left if X has its margin set to Z" uggggg.

For layout?? Burn the heretic! [1]

The real reason we don’t use tables for layout (and only for the occasional tabular data) is because a table layout doesn’t work really well on the screen of an iPhone or Android phone, especially when they are vertically aligned. So, the workaround is to use media selectors: Desktops, laptops, and tablets get a table layout; phones get a simpler one-column layout.

I believe grid and flex layouts allow one to use a single design which will appropriately scale from a phone screen to an ultrawide monitor, but I use a two-layout or three-layout design for my web pages.

[1] In the days when the CSS Zen Garden was new, all of the web design blogs and comments felt using for anything at all was heresy, since abusing resulted in really ugly and hard to maintain webpages during the dot-com days of the late 1990s. It would be an extended discussion whether it was OK to even use for clearly tabular data.

CSS was never meant to be used for applications.

What happened was this: Once upon a time, there was only HTML. It could only make simple text pages.

Then the internet revolution of the 1990s happened, and everyone wanted to put make their webpage look like a glossy pamphlet. So along came extra HTML tags, and the widespread abuse of and other tags added to HTML to make web pages look like glossy pamphlets.

At the same time, CSS was developed so the HTML could stay clean and maintainble, and the layout of the “glossy pamphlet” look was in a separate file. HTML + CSS wasn’t designed to make an interactive app. It was designed to make a magazine article or an online resume. One would use Java (1990s) or Flash (first 2000s decade) for anything interactive.

It was in the 2010s, long after Java applets stopped being widely supported, and when Flash was too proprietary and too insecure, that the ability to make a fully interactive app was tacked on to Javascript; this was not the original intent of Javascript nor of CSS.

So, there is no real underlying design. It was something hacked on to a standard designed to share text documents.

If Steve Jobs were alive today, I think Apple or someone else would create a new interactive standard without all of the baggage of HTML + CSS + Javascript. It’s like the problem we have had for years, where a modern x86_64 chip is a 64-bit extension of a 32-bit extension of an originally 16-bit chip; it’s only now with the M1 that we are finally using a more elegant and well-designed chip architecture for desktop computers.

These days you actually can use without compromising accessibility, by adding aria-annotations. So if you prefer this to CSS, go ahead.

Most of the angst around was before aria support, so using purely for layout impacted accessibility, which meant it was not viable for most real-world scenarios.

That said, if you need stuff like colspans for a layout, you are probably better of using grid.