I want the CSS coupled with my React component and I want to use JavaScript to calculate style properties depending on the props. I don't want to bother with naming classes or CSS scope.
I also don't want to bother with switching languages just to color a border or center align some text. Or have static styles in one place/language and dynamic styles elsewhere despite both setting up the exact same component. And when working as a designer I like seeing the style code literally right there along with the component nesting code, data handling logic, etc. (In my personal opinion, the real benefit of this comes when designing using an inline workflow similar to jsx-style, but that's an argument for among converts!)
From my perspective anyway, generating CSS from JS is just to get these benefits and more without various performance problems. It's a practical compromise given the reality of how browsers work in 2016 and our current tooling. It's treating CSS as something like a compilation target (because it's a standard which happens to already exist) rather than writing the "assembly code" by hand. If browsers provided other ways of interacting with their internal style structs or whatever like setting default styles through json or a special js file then a different solution might make sense---perhaps even one which gives whole new powers!
I also don't want to bother with switching languages just to color a border or center align some text. Or have static styles in one place/language and dynamic styles elsewhere despite both setting up the exact same component. And when working as a designer I like seeing the style code literally right there along with the component nesting code, data handling logic, etc. (In my personal opinion, the real benefit of this comes when designing using an inline workflow similar to jsx-style, but that's an argument for among converts!)
From my perspective anyway, generating CSS from JS is just to get these benefits and more without various performance problems. It's a practical compromise given the reality of how browsers work in 2016 and our current tooling. It's treating CSS as something like a compilation target (because it's a standard which happens to already exist) rather than writing the "assembly code" by hand. If browsers provided other ways of interacting with their internal style structs or whatever like setting default styles through json or a special js file then a different solution might make sense---perhaps even one which gives whole new powers!