3 ms·
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.
by eurasiantiger 5y 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.
- chrisweekly 5y agoRemix^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 https://remix.run/docs/en/v1/guides/styling
- eurasiantiger 5y agoThat’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.
- chrisweekly 5y agoYou 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.
- eurasiantiger 5y agoWell, 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.