3 ms·

This isn't even a statement about either technology, it's just a commentary on bad developers, and trying to alter or minimize the damage they do because they'r

This isn't even a statement about either technology, it's just a commentary on bad developers, and trying to alter or minimize the damage they do because they're bad, using a different technology. The former yields expected behaviors, and if you deviate, what do you expect? While the latter means that any time your product experiences a redesign, you have to manually change everything. Not only do you manually change everything, and every component is isolated, you end up writing repetitive styles, and then you're stuck with a codebase with 5 different buttons, 4 different drop-downs, 7 different color schemes. Nah, there's a reason why sites like Bootstrap Expo existed. CSS in JS doesn't just fail to prevent you from writing expensive to maintain code, it also makes it harder to evolve a product over time.

tracker1 8y ago
You can share style portions at the component level.. you can bring in portions of style definitions from the parent or even the theme level... import baseStyles from './section.styles.js'; const styles = theme({ baseline: { ...theme.components.foo, ...baseStyles.foo, // customizations here }, variantState: { // dynamically controlled style alterations for // a different state ...baseStyles.variantState }, }); You can totally reuse styles, it's just controlled at the component level. Beyond this, options for the theme itself can be injected by default, release, application settings in the app, and user configurable settings in the application. export theme = async () => { const {env, app, user} = getThemes(); return deepMerge(base.theme, env, app, user); };