Kiro on State of React and CSS

Comment on State of React and CSS parent

Say you have .supermenu .button. What happens if a global .button class enters the picture? The root class is good for preventing leaks but offers no protection.

talmand 10y

That's the point that one should start paying attention to what they are introducing into the global scope.

But it depends on the CSS. A global button class will not overwrite the properties of a button class descending from a higher level class. It will only introduce new properties that are not already defined in the button that's inside the parent scope.

There are advantages to having base styles in a global class, but I agree they can get unwieldy if one doesn't have discipline with them.

stevepotter 10y

Good point. How about .supermenu-button?

tlrobinson 10y

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

I'm not totally sold on this approach though. You lose some of the benefits of CSS, like theming.

Comments