CSS优化:元素ID与类

Question

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

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

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

#searchTool, #classifyTool .tag

在这种情况下选择器如

$('#searchTool .tag')或$('#classifyTool .tag')

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

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

所以有两个问题:

有更好的替代方法吗？

谢谢

Answer 1

至于使用哪一种,请使用最合适的一种.如果您的页面上有搜索框,那么使用ID就是最合适的,因为只有一个搜索框.另一方面,表行可能会被类识别,因为存在(或可能)不止一个.

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

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

不真实,我已经将页面加载时间从> 1秒减少到<100毫秒,主要是因为消除了裸类选择器(这不是唯一的,但它是一个巨大的组件). (5认同)
+1 - 技术上是正确的,但是我会更强烈地强调这样一个事实,即性能差异几乎完全是理论上的 - 在实际情况中它实际上永远不会重要. (3认同)
由于几乎每个浏览器都有`getElementsByClassName()`方法,因此在大多数浏览器中类名不应该太慢.在这里失败的唯一一个是IE,这是一个很重要的因素,诚然.另外,我应该指出,我没有看过jQuery的Sizzle选择器引擎代码,所以我不知道引擎是否使用它来优化任何东西.查询也可以通过使用新的`QuerySelectorAll()`方法来加速,使jQuery选择器的速度更不相关,但是更少支持. (3认同)