3 ms·
This is basically what the BEM (block, element, modifier) convention is. BTW, CSS modules essentially automate and enforce BEM. Each component's CSS file can h
by tlrobinson 11y ago
This is basically what the BEM (block, element, modifier) convention is.
BTW, CSS modules essentially automate and enforce BEM. Each component's CSS file can have a ".button" class that doesn't conflict with any other ".button" on the page because they're automatically name-mangled (https://en.wikipedia.org/wiki/Name_mangling https://en.wikipedia.org/wiki/Name_mangling). Then in your React code you do something like
import styles from "./supermenu.css"
SuperMenu = ({}) =>
<div className={styles.supermenu}>
<button className={styles.button}>Foo</button>
</div>
Or use something like react-css-modules to make it a little less verbose: https://github.com/gajus/react-css-modules https://github.com/gajus/react-css-modules
I'm not totally sold on this approach though. You lose some of the benefits of CSS, like theming.