Hacker News Reader

Comment by stevepotter | Hacker News Reader

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?

View on HN

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.

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.

Good point. How about .supermenu-button?

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.

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.

Reply on news.ycombinator.com