CSS优化:元素ID与类

时间:2009-08-05 00:42:49

标签: jquery html css

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

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

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

#searchTool, #classifyTool .tag

在这种情况下,选择器如

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

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

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

所以有两个问题:

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

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

  3. 有更好的替代方法吗?

    由于

2 个答案:

答案 0 :(得分:30)

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

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

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

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

答案 1 :(得分:0)

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

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

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