I always feel like these naming conventions are just one big workaround for the pain of a global namespace. We should tackle it with tools like CSS Modules[0], not with something as flimsy and error-prone as a naming convention.
CSS modules is a cool idea but I don't think there's anything wrong with CSS as it stands today. When you work in any language you need to understand and work with the language you have and I think that a lot of criticism of CSS boils down to "CSS doesn't work like this other language/paradigm I know and like".
No, CSS isn't a programming language, but that doesn't mean it can't use functionalities that are typical of programming languages - just look at variables, functions, arrays, maps and other features that preprocessors like SASS have brought us.
While some approaches are a matter of taste/habit, I think there's an extremely wide consensus that having everything available in global scope is bad.
If the global namespace really is by design, then why are we adopting conventions (such as the one in this very topic) that mostly aim to defeat it? Prefixing class names to apply them only to a specific component is nothing but a primitive way of limiting scope.
I'm wondering what's the merit/advantages of using css-modules over using Shadow DOM to limit the scope of CSS rules.
In these cases you would fully encapsulate CSS, HTML, and JS on a per-component basis.