The Rules of Margin Collapse (joshwcomeau.com)

Same.

Looks close enough to the design, ship it.

The behavior is very obvious if you use them for text. (I have had a few cases of naively stating my margins, the browser exactly displaying what I meant, instead of what I thought I have said, and needing to understand why it worked.)

Just don't use margins for layout, I guess.

   container {
     flow: horizontal; /* single row */
   }

   container > child {
     margin:1em; /* will collapse */
   }

"IDK man, I just always use flexbox"

A lot of CSS works this way, until the fateful day you have to fix something and finally spend a day investigating how exactly it works.

Same, though for me it's probably more like:

"Add margin. More margin. Moooore margin!! Oh wait.."

I think the title should definitely be changed to not be misleading ;)

The first paragraph on its own fits quite well, given the average amount of article-reading that happens here.

What do you mean this isn't a new variant of waveform collapse for procedural random generation?

Marx' Law of the Falling Rate of Profit[0]

[0] - https://link.springer.com/chapter/10.1007/978-1-349-12353-7_...

You should try actually implementing packing, layout and size allocation algorithms sometime, if you have not.

We have our own Canvas (aka scene graph) object inside Ardour and attempting to implement all of the above there showed how delightful most of CSS is, and how necessary.

FWIW, while there are unfortunately only very few attempts at formalizing CSS, there's at least an unofficial, unreviewed (?), partial formal semantics for (CSS 2-era) float layout based on z3 SMT and Racket you can take a look at to get a flavor, though it isn't receiving further development.

[1]: https://github.com/uwplse/cassius

[2]: https://pavpanchekha.com/blog/css-floats.html

That would be amazing.

It would finally allow for competition in languages/paradigms.

And we could write modern languages from scratch.