css - 作用域 CSS 选择器性能

Question

很长一段时间以来，我一直非常认真地对待这个警告：

范围样式不会消除对类的需求。由于浏览器呈现各种 CSS 选择器的方式，p { color: red }在作用域（即与属性选择器组合时）会慢很多倍。如果您改用类或 ID，例如 in .example { color: red }，那么您实际上消除了对性能的影响。

事实上，我经常会竭尽全力只使用类选择器（例如，添加“last”类而不是 using :last-child）。

我不清楚这实际上有多重要。具体来说，我有两个问题：

1. 渲染性能影响是否与组件隔离？换句话说，范围 a ul，然后添加ul[data-v-f3f3eg9]到 CSS 中，是否会全局惩罚所有ul渲染？
2. 如果我将元素选择器嵌套在一个类中，这有什么帮助吗？例如使用.messages p:last-child而不是p:last-child？

笔记

我还注意到这是在此处的 Vue 样式指南中，我相信它最近会更新。它再次使用模糊的术语，如“将相当慢”，所以我不知道该怎么做。

标签： cssvue.js