[snookca]

I'm not sure that trying to keep everything in one file is necessarily a great argument. Optimizing for not having to open files doesn't seem like the best thing to optimize for. Even many of the react+inline styles examples include putting variables and other patterns into external files. Language (i18n) strings could be another external dependency. Data model, controllers, and routing are other good examples. (Rarely (if ever) have I seen an MVC framework that doesn't separate things into separate files.)

[RussianCow]

It's more conceptual than keeping everything in one file. I want to be able to see everything related to a component without looking at anything else, and to be able to easily change its styling in the same way I change its structure or behavior (at least with React). You can technically do this by creating a separate CSS file for every component, but the problem is your CSS has no context about your component, and so you end up doing all kinds of shuffling with classes to get things to display the way you want them to. This is a much more elegant solution, in my opinion.