Vuejs css scoped performance

Question

I'm developing a new app with VueJs and I see that implement a "css scoped" like this

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

It render like

<style>
.example[_v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" _v-f3f3eg9>hi</div>
</template>

I'm going to develop a big project with many components in Atomic design and I'm asking if it's better, for performance, to use classes or use scoped

Answer 1

Scoped styles do not eliminate the need for classes . Due to the way browsers render various CSS selectors, p { color: red } will be many times slower when scoped (ie when combined with an attribute selector). If you use classes or ids instead, such as in .example { color: red }, then you virtually eliminate that performance hit. Here's a playground where you can test the differences yourself.

This is to quote the official vue-loader documentation that can be found here

Answer 2

It will not affect the performance.

The css parsing time will be absolutely insignificant in comparison more complicated processes (for example, parsing/interpreting js, rendering html, etc).

Answer 3

I think it's dangerous to assume that attribute selectors won't affect performance from a CSSOM perspective. Doing a quick search, I can't find much to back this up, but it seems like Vue's intentions are great, but the end result could potentially release far less performant CSS than if they did not do this with attribute selectors.

I think it's something that depending on the size of your app, you'll just need to benchmark. As a baseline though, you should not want to use attribute selectors given they are less specific, thus slightly more effort for the browser to target.