Is it good to use scoped style for iterated component in Vue

user_12396709 0
Viewed 149

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?

vuejs2 vue-component vue.js css javascript
1 Answers

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

user_88165850
Related