My objection is. I already learned how to write less and then later switched to SCSS. I like the syntax because its basically CSS and I do even avoid heavy nesting taking bootstrap as a good example. I use atom and scss-lint (now deprecated but still works great) to live lint my SCSS in Atom and spot errors and that includes order! Can I do this in CSS that is embedded into stupid react files that mix JS logic with the visuals? My guess is there is probably something out there where I can do something very basic but not even close to real feature complete linting. And yes, I don't think style and logic should be mixed together. What about autoprefixer ... how do I do all my SCSS/CSS processing if my CSS sits in JS files?
The style I like to use is the css/scss webpack loader.
Basically, you import a .scss file into your .jsx.
The scss is compiled and at the same time imported into .jsx as a hashmap where the key is your scss class-name & the value is the compiled class-name. I think this sounds like what you're looking for since it keeps jsx & css in their respective files but still being coupled into their own component which is easier to reason about.
