CSS is a very reasonable abstraction for the job it was originally designed for: layouting of mostly textual documents. As such it borrows its concepts from the desktop publishing world. Margin and padding make absolute sense when you think in terms of headings and paragraphs. Float is an established term for having text flow by an image or other rectangular insertion. And so on. You have to remember the context in which CSS was first conceived. The Web looked quite different then.

CSS has very much caught up for layouting and styling web applications. If you don’t believe me, take a look at CSS grids.

Yes, I know. But the OP was talking about the classic stuff.

Dear lord it's 2020 CSS has its own grid system, it's CSS Grid, and it's both easier to understand and more flexible than adopting the old frameworks. It also has variables, pseudo-selectors (which, like with html elements, you can invent new ones to suit your purposes), and more.

Is creating your own pseudo-selectors really possible? I like to think I'm pretty up to date on modern CSS but I've never heard of this.

I might be wrong but I think GP is talking about shadow parts[1]

    my-element::part(custom-selector) {
      /* ... */
    }

1: https://developer.mozilla.org/en-US/docs/Web/CSS/::part

Well, I wouldn't recommend it, but certainly you can programmatically apply a pseudo-element or pseudo-class and programmatically define behavior around those things.

An off-the-shelf grid system is too inflexible, and you spend more time customizing it or fighting it to get the result you need than you would have just building what you need.

You can construct a grid based system based on a block system, but wouldn't the reverse be much more difficult?