3 ms·

> And when you want one color for one deployment of your application, vs a different color for another deployment? Easy, have the build process select a differ

by jf- 8y ago

> And when you want one color for one deployment of your application, vs a different color for another deployment? Easy, have the build process select a different variables file to be imported by the entry point, with different colour variables per deployment. You ask the question in an accusatory manner as if you think this is difficult. > Or you want to reuse Configuration values across A and B components, but C and D components are a different variant. All of which are configured differently on different deployments (application deployed to different clients with different themes). What exactly do you think is stopping you from programmatically selecting styles in this situation? I’m not getting where you think the difficulty is arising.

tracker1 8y ago
And when the variables are configurable in the application? then the options are... a) setup the entire build toolchain for SCSS in the application b) deepmerge some JSON, and have the app use that. I've had to do it both ways... B is far easier to manage.
- jf- 8y ago
  So when you have user configurable sass variables, css in js might make things easier. That seems like a fairly narrow use case, I’m not willing to sacrifice separation of styling everywhere in every component in every react app because it makes user defined style variables somewhat easier. Indeed, I’d be willing to put in the extra work to keep it if I did require such functionality - probably this is as simple as loading the scss variables from json, so I doubt there’s a significant workload involved.
  - tracker1 8y ago
    You can still inherit baseline styles via a common theme that gets injected... See material-ui[1] which uses react-jss[2] configured with appropriate plugins, being able to customize components using said theme is far easier than any SCSS setup I've used. It's really, really nice to use in practice. It's just a slightly different syntax, and if you REALLY want to, you can still put your styling config in a different file from your component rendering. [1] https://material-ui.com/ https://material-ui.com/ [2] https://www.npmjs.com/package/react-jss https://www.npmjs.com/package/react-jss

by jf- 8y ago

tracker1 8y ago

And when the variables are configurable in the application? then the options are... a) setup the entire build toolchain for SCSS in the application b) deepmerge some JSON, and have the app use that. I've had to do it both ways... B is far easier to manage.

jf- 8y ago
So when you have user configurable sass variables, css in js might make things easier. That seems like a fairly narrow use case, I’m not willing to sacrifice separation of styling everywhere in every component in every react app because it makes user defined style variables somewhat easier. Indeed, I’d be willing to put in the extra work to keep it if I did require such functionality - probably this is as simple as loading the scss variables from json, so I doubt there’s a significant workload involved.
- tracker1 8y ago
  You can still inherit baseline styles via a common theme that gets injected... See material-ui[1] which uses react-jss[2] configured with appropriate plugins, being able to customize components using said theme is far easier than any SCSS setup I've used. It's really, really nice to use in practice. It's just a slightly different syntax, and if you REALLY want to, you can still put your styling config in a different file from your component rendering. [1] https://material-ui.com/ https://material-ui.com/ [2] https://www.npmjs.com/package/react-jss https://www.npmjs.com/package/react-jss