Hacker News new | ask | show | jobs
by eurasiantiger 1540 days ago
If only there was a way to generate a minimal cascade from a given set of styles. Sort of automatically detect properties that can be moved to a common parent.

One would necessarily have to generate the HTML, too, otherwise there are no guarantees, and even then the CSS—browser interplay might lead to broken styles.

1 comments

Remix^1 has an interesting approach here; they encourage use of traditional CSS (vs CSS-in-JS), but the styles for a given route are scoped to the component.

1. https://remix.run/docs/en/v1/guides/styling

That’s a good fit when each route needs a lot of custom styles and each one is developed by a separate team.

However, it doesn’t really fit well if a brand-themed app is developed by a single team. Consistency is easier to maintain when styles can be reused across the application, and things like styled-components don’t work that well there since they tightly couple components to styles, so you need a theming system on top of them… which is silly, because CSS itself is a theming system.

CSS modules is a bit better, but even that encourages encapsulation which is necessarily broken if the styles need to be shared between components.

You seem to have misunderstood; Remix promotes the use of bog-standard CSS. Literally nothing about it in any way inhibits reuse of styles across the app. Not sure where you're going in critiquing styled-components.
Well, does it keep the styles with the components, or does it expect devs to create a separate folder for shared styles? If there are lots of shared styles, that equates to having two sets of components: one React, the other CSS.