We use scoped style in component in Vue and it has advantages. But suppose I have a component like BoxComponent.vue and defined one class.
<style scoped>
.box-component{
float: left;
flex-grow: initial !important;
margin: 0 3px;
}
</style>
I think it might be good to use this in one or twice but when I use this in loop maybe hundreds of loops, then It will generate independent style classes because vue-loader will treat each item differently.
In that case I think it could be problem in terms of speed and memory usuage. Can anybody elaborate this please? When it is good to use scoped style or global style in Vue.js?
IMO, the question should be more of a
Do I need my style to be global here or not?
than a performance one. I'd say that it's pretty meaningless overall, especially if you use an utility framework (like Tailwind). The fact is that you will get less CSS re-definitions across all of your pages.
Choosing how you write your CSS and also what do you exactly use, will have greater impact than scoping or not. Give a read to super-light tools like UnoCSS if you're interested into keeping something super slim.
Also, you will get far more performance hit by 3rd party scripts like GTM, a widget chat or whatever you'll be forced to add by your company anyway.
I don't that runtime CSS will get you poor performance, just don't use super generic selectors like * or div across your website and you should be fine.
Still, if you have a super huge website, it could be nice to try to benchmark the whole thing somehow by checking the total render time (staying focused on the styling indicators of course): https://developer.chrome.com/docs/devtools/evaluate-performance/
Official source: https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements