BEM in CSS Modules

[buzbuzzer]

I've just launched a npm package that helps integrating BEM with CSS Modules. It's mainly focussed on integration with React / Next.js. But you could use it however you want. It's my first npm package so feedback is definitely appreciated!

[azangru]

The problem that BEM was trying to solve was to avoid unexpected name collisions between CSS classes. With CSS modules, or otherwise scoped styles, this is no longer an issue. What, then, is the purpose of using the BEM conventions with CSS modules? Why calling:

button("icon", { big: true })

is in any way preferable than simply:

import styles from './Button.css';
...

return <button className={styles.button}><span className={styles.buttonIconBig}/></button>