What is the best way to manage styles in Vue?

Question

Vue.js

Good evening.
I'm primarily concerned with the following two approaches:
- the css per component approach, when the css is in the component
- css modules, when the css is imported from external files

Which one is objectively better? Does the first approach have any downsides? Is it worth it, in the first approach, to strive to keep css only in those components for which it is intended?

Thanks in advance.

Answer 1

The only negative that can be in the first paragraph is the size of the .vue file
Of course, not in bytes, but in lines. It's hard to maintain 2000 lines of css code.
But, if you approach the construction of architecture correctly, then such situations can be avoided.
Except when you need to make a lot of changes in media queries. Then you can already include several files via @imort that are responsible for a specific media query.