不必要的类vs元素选择器（CSS性能）

Question

知道css是从右到左读取的，我想知道在将类添加到html只是为了更有效地针对css中的元素之间的性能/可读性之间的权衡。

我还想知道通用元素选择器如何影响诸如Angular之类的封装组件的性能。例如，如果我在组件中使用p选择器，则在编译/渲染页面时，css将搜索文档的所有p标签还是仅搜索组件？

class TestService with ChangeNotifier {
    @override
    void notifyListeners() {
        print("Triggering SwitchScreen's build method");
    }
}

vs

<div>
  <span>hello world</span>
</div>

span {
  color: red;
}

Answer 1

如果您的html文件中的跨度为2，并且您的代码例如如下所示：

'[', "'", '1', "'", ',', ' ', "'", '2', "'", ',', ' ', "'", '3', "'", ']'

您正在为此写给CSS：

<div>
  <span>hello world</span>
  <span>Hello Again</span>
</div>
span {
  color: red;
}

在您的网站中，您的跨度全为红色，因此世界您好，您好。

但是...

如果您使用此功能：

span {
  color: red;
}

在您的网站中，您好世界变成红色...