CSS优化：元素ID与类

Question

使用MVC和jQuery，我正在更多地使用CSS。想到的一个问题是使用Element ID与Classes的最佳方法是什么。如果我使用元素ID，jQuery中的选择器会更短。例如：

#imageTag... $('#imageTag')
#searchTag... $('#searchTag')

作为替代方案，它可以使用父容器元素进行结构化。

#searchTool, #classifyTool .tag

在这种情况下，选择器如

$（'＃searchTool .tag'）或$（'＃classifyTool .tag'）

可以使用。当整个页面中存在多个类的实例时，该方法尤其有用，例如.tag。您只需更改父容器对象。

这只是一个简单的理论示例，并不是为了代表真实的风格，只是描绘了这个概念。

所以有两个问题：

1. 假设页面上有大量样式，是否对页面/ CSS或jQuery的性能有任何影响？

2. 第二种方法似乎更灵活，更易于维护。根据您的经验思考。

有更好的替代方法吗？

由于

Answer 1

• ID是最快的
• 标签名称是下一个最快的
• 没有标记名称的类名称是最慢的

至于哪一个使用，请使用最合适的。如果您的页面上有搜索框，那么使用ID就是最合适的，因为只有一个搜索框。另一方面，表行可能会被类标识，因为有（或可能）不止一个。

尽量不要像“.class”那样使用选择器（在CSS或jQuery中）。你迫使jQuery或浏览器基本上遍历整个文档树。大多数情况下，该类仅适用于一种标记，因此请指定（例如“div.class”）。仅此一点就可以产生巨大的性能差异（特别是对于带有大型文档的jQuery）。

选择器的长度不应该是一个考虑因素。性能，可读性和可维护性应该是。

Answer 2

我通常更喜欢类方法。原因是您不必为系统中的每个新ID元素编写新的css选择器。

另外，我倾向于区分“结构”和“风格”CSS。这意味着，我将处理大小（宽度/高度）和位置的事物与执行字体粗细，颜色等的css类分开。

对于不变的结构框架，我将使用ID。对于HTML中可能有多个表示的部分，我将坚持使用类机制。