使用 ID 和 Class 要点

最近看了不少网页的源代码,发现大家对于一些标签的使用习惯特别是关于 ID Class Name 的使用并不太一致,或许对页面呈现结果并没有影响,但对于我们一直高呼 W3C 标准的时候,这样个性的做法无疑会给你的团队带来不大不小的麻烦。考虑到我自己没有权威性,这里我翻阅了一些大家比较推崇和公认的权威资料,结合我自己平时工作中碰到的问题简单描述一下……

首先区分一下 ID 和 Name 标记:这两个没有什么太大的区别,都是用来标记对象名称的,不同的是一个是 Microsoft 的,另一个是 Netscape 的;具体相对重要的区别在于使用表单提交数据时需要使用 Name 标签,因为在表单接收页面只能接受赋 Name 标签的内容,赋 ID 的标签是接收不到的,当然一定要赋 ID 也是可以的,需要改变一下方法,这里列一下表单提交时需要赋 Name 的元素:

  • 需要使用 Name 的有表单元素:form  input  textarea  select 及框架元素 iframe  frame 等;
  • 只能赋 ID 的元素基本是除去和表单相关的元素包括:body  li  a  table  tr  td  th  p  div  span  pre  dl  dt  dd  font  b 等等。

下面需要仔细讨论一下关于 ID 和 Class 的用法:首先,简单的说 ID 就是唯一元素的标志,而 Class 则指某一类元素的标志,这么说,同样的 ID 在一个页面里面只能出现一次,而 Class 可以重复出现。具体到页面里面改该如何使用呢,我通常是给页面里只会出现一次的元素用 ID 来标识,例如:页头(header)页尾(footer)导航(menu)等等,而多次出现的元素,例如:栏目(column)列表(list)则使用 Class 。

尾声,其实按照上面的规则,我是发现了一点问题的,按照之前的思想,页头、页尾、导航都使用了 ID 那不用说 搜索(search)肯定也用 ID 了,这里要小心,老板很可能为了网页的易用性让你在页头和页尾都加一个搜索框,当然这个时候改用 Class 也是可以的,或者干脆不改,具有良好容错性的浏览器也不会报错出来,但这样不是跟我们一开始提倡的思想有些相悖吗,其实导航也是有可能摆两个出来的,这样,我们在网页制作时根本不知道唯一的元素还是否将来还是那个“唯一”,会有人说,如果这样,干脆直接全部用 Class 好了,小心,这样在《网站重构》被称作“classitis(大量使用 Class 的做法)”。另外, ID 在程序员那里是要用到的,所以,不能保证用于 CSS 的 ID 同时可以方便的被 JS 调用,至少需要两个人来协商一下,同一元素可以定义多个 Class 但只能定义一个 ID ,而且后者的优先级高于前者,能理解吗。个人认为造成今天大家对于 ID 和 Class 使用习惯大不相同的原因就在于大家对于整个页面乃至整个站点的理解与视角的不同。当面对一个元素和一个页面时,面对一个页面和一个站点时,你所能想到的预见到的,以及统筹全局的理解,这些需要我们仔细去品味与不断尝试的。