If you like the tight integration thats fine, run with it. I personally wouldn't do it, preferring CSS in its own file while still following a modular pattern.
React won't be the trendy library forever so ride that wave while you can. When it comes crashing down how are teams supposed to cope with migrating JSX to DOM and CSS-in-JS to CSS? Keeping a separation of concerns in a project is a good thing when you consider migration.
What if another team not using React at your corporation wants to use the same styling? What do you do then? Write a script that exports all the CSS-in-JS to just CSS just because you want the CSS inline with the JavaScript? It seems like an unnecessary marriage where the benefits do not outweigh the potential pitfalls.
Web Components solve the problem of CSS having a single scope and the spec provides patterns for when components need a theme or custom styling. CSS collisions can be avoided by following a pattern like BEM or OOCSS. These concepts should not be considered hard considering some of the quirks found in JavaScript. If someone thinks CSS is hard by itself perhaps they just never learned the fundamentals properly. I find a lot of educational programs do not sufficiently teach specificity or architectural patterns for CSS.
The only time I have consistently thought I needed CSS in JS was when manipulating a matrix3d transform.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
If you like the tight integration thats fine, run with it. I personally wouldn't do it, preferring CSS in its own file while still following a modular pattern.
React won't be the trendy library forever so ride that wave while you can. When it comes crashing down how are teams supposed to cope with migrating JSX to DOM and CSS-in-JS to CSS? Keeping a separation of concerns in a project is a good thing when you consider migration.
What if another team not using React at your corporation wants to use the same styling? What do you do then? Write a script that exports all the CSS-in-JS to just CSS just because you want the CSS inline with the JavaScript? It seems like an unnecessary marriage where the benefits do not outweigh the potential pitfalls.
Web Components solve the problem of CSS having a single scope and the spec provides patterns for when components need a theme or custom styling. CSS collisions can be avoided by following a pattern like BEM or OOCSS. These concepts should not be considered hard considering some of the quirks found in JavaScript. If someone thinks CSS is hard by itself perhaps they just never learned the fundamentals properly. I find a lot of educational programs do not sufficiently teach specificity or architectural patterns for CSS.
The only time I have consistently thought I needed CSS in JS was when manipulating a matrix3d transform.