5 ms·

For me, using css classes in a css file has worked fine for reusable components. For isolation, the root element of the component has a class name like class="

For me, using css classes in a css file has worked fine for reusable components. For isolation, the root element of the component has a class name like class="supermenu". What are the disadvantages of this as opposed to the intricate toolchains being popularized along with React?

Kiro 11y ago
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.
- stevepotter 11y ago
  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.
- talmand 11y ago
  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.
spankalee 11y ago
This gives you an upper bound on your scope, but for safe composable styles you also need a lower bound. Only Shadow DOM really gives you that. You can simulate it with some significant markup and CSS pre-processing, but it's tricky. Polymer does this with it's templates.

Kiro 11y ago

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.

stevepotter 11y ago
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.
talmand 11y ago
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.

spankalee 11y ago

This gives you an upper bound on your scope, but for safe composable styles you also need a lower bound. Only Shadow DOM really gives you that. You can simulate it with some significant markup and CSS pre-processing, but it's tricky. Polymer does this with it's templates.