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 (i.e. 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