3 ms·

Good point. How about .supermenu-button?

• 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.