[sahrizv]

I think a global style file helps when the same HTML markup is repeated in several parts of your application.

However, a component based architecture, by definition represents the reusable HTML markup of your application. Since such a component brings along its own styles wherever it is used, there is negligible loss of reusability of styles.

This is in theory of course, but my experience (with Vue.js) has been the same in practice too.

With Vue.js at least, you have the optional "scoped styles" feature which gives you tuneable reusability in case you really need it. Most of the time, I find my self writing

  <style scoped>/*styles here*/</style>

 in my component files.

Edit: Regarding performance, I believe it could potentially be an issue on mobile devices (for now), and if so I would solve it by creating a global stylesheet by merging all individual stylesheets and appending the component name as a prefix in all selectors in both the styles and the markup.

This would be done programmatically using webpack or some other front end build tool. I doubt I'd ever need to do that TBH.