I agree, that BEM can be used without any tools. And it is his benefit. But in this article you use so many tools for them, that CSS Modules become more easy.
Compare:
1. You have helpers in JSX and CSS.
2. With CSS Modules you will have helpers only in JSX ;).
Cascade seems like very dangerous thing, that kills all benefits of isolation and BEM philosophy. But OK, it is fare point.
But why BEM is more simple? Examples in your article is much more complicated, than with CSS Modules. In CSS Modules you just forget about selector conflicts and write any selector you want (same feeling like with Autoprefixer, when we just forget prefixes rather than writing a mixins). In BEM you need to use (and think of) special methods and CSS functions.
My second question is a “reset layout” a good thing? It is completely in non-BEM philosophy of having uncontrolled side-effects.
I think with BEM or CSS Modules, we should think about “local reset” rather than “global reset”. For example, postcss-autoreset, which put reset properties to every block and element selector.
What do you think about it?
Great work. Compact syntax is always better
But what is a BEM benefits compare to CSS Modules with React. I thought that BEM should be used only for server-render sites, when it is hard o use CSS Modules. But when you have client-render with React. CSS Modules will have more clear code, than BEM.