scoped CSS performance impact

[KosRud]

docs/src/api/sfc-css-features.md

Line 101 in 4cbc64e

- **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.

After reading this part of the docs, I got curious about the performance impact of attribute selectors, but could not find any conclusive evidence one way or the other. Lots of dead links, 10+ years old articles and presentations with general advice but no benchmarks, etc. The closest thing I got was this issue, which apparently only affects IE11.

It would be great to have some context on the issue of attribute selector performance and if the mentioned performance penalty still exists today (maybe in the form of "further reading" links).

[KosRud]

Edit: found a benchmark

Curiously, it reports a rather small difference on IE9 in light of the issue linked above.

I ran the benchmark above in IE11 and attribute selectors were slightly faster than class selectors in my case.

[KosRud]

Found another anecdote of attribute selectors being slow in IE11, though I did not observe this issue when running the benchmark on IE11. Perhaps there was an update to IE11 since then which improved attribute selector performance?

[heygsc]

I think different codes may involve different situations of browsers, elements, and selectors.
However, in most cases, class and id performance is better in CSS selectors, while attribute selectors may be worse.

[heygsc]

However, on attribute selector performance, I don't seem to have found any official information, such as MDN ( if the document needs to include some links ) .

[WesCook]

I'd be curious to see this scientifically tested, too. Naming things remains a considerable time sink in programming, and any chance we get to avoid doing so is a productivity win.

If it so happens that we can target elements in scoped styling with a near-zero performance hit, that saves us time in thinking about class names, and in actually writing the code. Less code also makes things easier to understand at a glance.

That doesn't mean you can't introduce classes when additional specificity is required. But as a default, I'd be happy I could use element names. Most components are (or should be) small enough that element selectors still offer enough specificity in most cases.

I don't have any projects large enough to perform any benchmarking tests. I'd love to see the mainline browsers tested though to get a better understanding of this issue, if indeed there is still one today.

[marco-quintella]

Many factors can impact on that, even the DOM tree complexity. But I see that the selector complexity is the most harmful.
These articles below are recent and the one from Edge teaches how to benchmark your selectors. From this Microsoft arcticle I can see that complex selectors are heavier at any case, attributes or classes.

Maybe this could be the case of benchmarking a vue app with it.

https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/
https://www.youtube.com/watch?v=J24xS21FlmY&ab_channel=KevinPowell
https://medium.com/@taimoorshoaib141/mastering-the-art-of-efficient-css-selectors-essential-tips-for-optimal-performance-82758198fb39