3 ms·

> Do you class your sass like `.fooco-app-area-feature-component No, that’s the whole point of modules, use whatever class names you want, when compiled the ac

by jf- 8y ago

> Do you class your sass like `.fooco-app-area-feature-component No, that’s the whole point of modules, use whatever class names you want, when compiled the actual class name has a small randomly generated string appended to it to prevent clashes with styles for other components. > I will say that having to mix selectors and strings is slightly harder than writing direct CSS I just use interpolation, e.g.: className={‘btn-sm ${styles.whateverClass}’}

tracker1 8y ago
And when you want one color for one deployment of your application, vs a different color for another deployment? 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).
- 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 you want one color for one deployment of your application, vs a different color for another deployment? 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).

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