Having X class strictly linked to X widget or component breaks down when your widget has multiple subcomponents which may or not be reusable, like having Y widget and Y widget with some slightly changed parameters. Suddenly your "clean" system isn't so clean and you end up either adding inline styles, extract these components into their own classes and naming them which just moves the complexity elsewhere, or creating your own frankenstein utility classes.

There' s reason why there was a rise in something like tailwind, because they ended up creating what IMO we end up doing anyway. For me, it's 100x easier to maintain to open a component up that is months old and grok every everything about it without having to reference some other CSS file or structure. If I want to tweak some aspect I can do so easily right there, I don't have to jump back and forth, and it's better than inline because I benefit from things like hover styles and responsive classes which I can't do inline. You can always extract truly reusable pieces into their own class.

Is it more verbose? Yes. Can it be abused? Yes. But I wouldn't go back to the "old" way and it isn't for lack of knowing how.