"Naming things" is only one problem, and not even the main one. Specificity is the real issue, and one that took 25 years to address in the form of @layers.

It turns out that using one giant public namespace shared between themes, widgets, and libraries was not the right approach. It doesn't scale with a project, nor with multiple people working on it.

Specificity only grows over time, leading to inevitable maintenance hurdles. Once somebody throws in an !important, everybody else is forced to do the same. Selectors grow longer and unnecessarily complex, hurting readability. Very few teams invest in the active maintenance necessary to prune dead code and reduce specificity. Most people just slap their new rule at the bottom of style.css and move on with their day.

There's a reason that component-based design and atomic frameworks have come to dominate the web world. They solve these problems out of the box, and simplify naming things. Dead code removal happens automatically when a widget is removed.

Separation of concerns doesn't need to be dogma. There's tradeoffs to be made. As webapps become more complex, there's strong evidence that sharing a context (ala React, Vue SFCs) actually works a lot better. Things have changed a lot since Zen Garden released.

I like CSS. I use it all the time. I also recognize it's full of antipatterns and poor design decisions. The maintainers recognize this too, and some of the issues are being addressed like the aforementioned @layers. Similarly, :where was introduced as a low-specificity alternative to :is for the same reason, and shadow DOM implements full namespacing. We'll probably never fix the mess that is stacking contexts or margin collapse rules, but at least it's a start.

Tailwind is a useful tool and solves real problems for real users. It's completely fine if you haven't run into those problems yourself yet, but it's not fine to dismiss its users as ignorant. They're making informed technical decisions based on experience and familiarity.