The problem with CSS is the C: Cascading. Which is what you are calling "inheritance"

Cascading is a nice feature for documents, that present data in the same way over and over. It not good for anything interactive. A lot of modern styling techniques are all about making CSS _not_ cascade. UI components (which is the majority of modern frontend dev) is basically a pre-requisite to achieve that.

The layout system is a bit of a separate discussion, and it is a mess yes, but mostly for backwards compatibility. If we could live in a world where all layout is default flexbox or grid and never mix inline with non-inline in the same container it would work out just fine. In fact that is _exactly_ how it works in React Native and it doesn't cause problems there. Styling in React Native also doesn't cascade which also makes it a lot easier to manage.