[stillkicking]

Things CSS got wrong:

- not supporting tables in CSS1, even though they were the dominant layout mechanism used at the time.

- `box-sizing: content-box` as original sizing model, which nobody has ever needed.

- `::pseudo-elements`, also used to convince people that having to add extra divs or spans to HTML is a horrible mortal sin to be avoided at all costs.

- the cascade / `!important`, causing endless rule precedence wars.

- `ems` as units relative to the parent instead of the root font size

- making flex-box alignment props the most confusing thing ever

- `display: none` to exclude elements, instead of an `exclude` prop, colliding with the display model

- `position: fixed` not making sense

- `text-overflow: ellipsis` not working in most cases where you'd want it to

I could go on for a while.

[xdfgh1112]

From the article:

"It’s easy, in hindsight, to critique things CSS got wrong or should’ve prioritized differently. But I want to take a moment to marvel at the things they got right."

If you are going to bring them up, it would be nice to also provide the modern CSS way of fixing those problems.

[cyral]

The text-overflow one really gets me every time... I would also add stacking contexts and margin collapse to this list. The rules for when they apply and when they don't are extremely convoluted and full of exceptions.

One note, there are "rems" which are ems relative to the root. I love ems and use them for almost every component because of the size inheritance actually. rems are used when I need to make sure something is always the same size regardless of the parent, but that doesn't happen often.

[c-smile]

display: none is horrible indeed.

Instead that "noneness" shall go to visibility - orthogonal property.

So if you have <tr> (display:table-row) you can switch it on and off by

visibility:none; and visibility:visible;

without touching display model.