|
I think the React philosophy on this is that JS and CSS (and HTML) separate technologies, not concerns. For very simple layouts, CSS is good enough, and it perhaps makes sense to split out the css into a separate file, so long as it's pretty clear what each class does, and the classes are pretty much all global so that changing a property of a class will do exactly what you intend (make the font size of all page titles on the site bigger), and not have unintended consequences on other components you weren't aware of, or thinking about. For web apps built from many complex components, the flat, global nature of CSS becomes very clumsy indeed. The power and flexibility you need to manage styles of these components quickly outgrows the power of CSS. You start having to rely on splitting the css into files that contain only styles applying to each component, so that the structure is manageable and you can find things and make changes easily. So why not just drop those styles right into the component file where they're referenced anyway? What concerns are you separating by keeping the css out in a separate file? You also start having to rely on build-time tools like SASS and LESS to introduce the necessary features to handle complexity in a large, component-structured codebase: variables, scope, mixins, etc. All these things are trivial features of JS, so why not just use JS to put in the styles directly instead of doing it with css propped up by a complex tool-chain? What are you gaining by doing so, other than having the CSS in a separate file? And, again, why is this a good thing? CSS is just a technology for applying styles to your markup. For many apps, it's in inferior technology to JS for doing this, particularly when using a framework like React. |