ID vs Class 老生常谈的选择器问题

昨天看了下那本《CSS3秘籍》, 在关于CSS选择器一章中提到应该尽量避免使用ID选择器, 这我就纳闷了, 以前似乎没太注意, 书中的理由是ID选择器权重太高, 缺乏灵活性, 并且引用了一篇文章来阐述原因(原文地址:When using IDs can be a pain in the class...) 这里直接用原文中作者的DEMO原文DEMO地址 来讨论下,作者的意思是在页脚使用.twitter a 定义好链接颜色后,将该链接加入到页眉上时会由于页眉使用了ID选择器而受到干扰

Let’s imagine you’re building a site and one of the requirements is to have a reusable Twitter widget that needs to be placable wherever the client chooses. Let’s for example say they want to kick things off with having the widget in the header and also in-page, at the bottom of an article. The Twitter widget’s styling must remain consistent.

以下是demo的截图:

这篇文章有一定道理, 在CSS布局时确实存在这个问题, 也不便于扩展,但是ID选择器在JS中确是最快的, 因为JS查找ID元素时一经找到就停止查找,而查找类元素则组要遍历整个DOM, 这个问题在stackoverflow的讨论(id vs class selection benchmark) 基于css布局与js性能的考虑, 我觉得是否可以在涉及js操作的DOM节点尽可能地使用ID 选择器, 而在CSS布局上尽量避免, 比如一个HTML元素上既写ID又写Class ,ID用于JS操作, class用于css样式布局,像这样:

<div id="btn" class="btn"></div>

另外直接放个选择器的测试网站,里面有包括jq,yui等框架选择器的测试Speed/validity selectors test for frameworks.