Popular posts

From my background and experience using separate stylesheets has the following benefits:

• Smaller codebase (explained below)
• Caching (@Robert said that already)
• SEO implications (easier to skim for bots, although this might be a thing of the past by now)
• Separation of concerns (this is a concept React is bending, but consider working with designers who don't know JS, when using CSS it's easier to integrate them in the process)
• Not Mixing UI/frontend logic with styles (when you already have a huge frontend, why add CSS into the mix? Bloats things up in my opinion)

I think for simple/small applications, or proofs of concept you might get away with it. But consider a component, which is repeated 100 times on a page, creating a stylesheet and adding a class will keep your code more compact (of course depending on how many lines of CSS a single component needs).

Also to use CSS in JavaScript effectively (think of prefixes for example), one needs to add a few components to the frontend. That is a burden to a already big frontend, which also (probably weakly) implements functionality readily available in every browser.