我只使用类,从不使用ID。 许多人喜欢出于不同的原因使用ID。
我在stackoverflow上看到了很多关于ID和类的问题,但没有人解决纯代码组织的观点,无论兼容性和运行时性能如何。
从代码组织的角度来看,我认为使用ID就像在Visual Basic代码中使用全局变量一样糟糕。
一个原因是ID必须是唯一的,这会在代码的不同独立部分之间引入不必要的和不良的依赖关系(控制HTML DOM树的不同部分)。
另一个原因是创建新的类名实际上比ID名称更容易,因为使用ID时你必须担心全局范围和类名,你只需要担心局部范围内的唯一性,与局部变量一样的好处。 / p>
大多数人会争辩说,通过ID进行寻址的表现要比按类别进行,我会同意这一点。但随着浏览器变得越来越先进,javascript和计算机的CSS寻址的本机实现变得越来越快,性能变得越来越不重要。因此,让我们忽视它,只关注当前问题背景下的代码组织。
这个讨论开始here,但是我的潜在错误建议会产生负面影响并且变得太大而无法留在评论中,因此我尝试将其转换为积极且易于管理的内容。
支持ID的一个可见点是将它们用作规则优先级的工具,因为#name的优先级高于.name的优先级。
我的回答:使用ID来提高优先级是糟糕的黑客,它更清晰,如果你使用在主体和其他级别的树之间插入额外的根元素,就会有更多自由,例如body div div span.class1{}
的优先级高于{{1} }高于body div span.class1{}
高于body span.class1{}
。另一个用于此目的的工具是span.class1{}
。
有些人可能会争辩说,当页面结构发生变化时,使用更多根元素会带来更多困难,但我不认为是这种情况,因为你永远不必在body之间放置任何东西并指定优先级div。那些div总是可以保持在身体之下,而不是其他所有内容。
另一个有趣的关联带来了指针,ID也不错,因为指针并不坏。
我的回答:如果你在代码中对绝对内存地址进行硬编码,指针会很糟糕。使用相对指针总是更好(例如:在8086 CPU中使用段(CS,DS,SS,ES);由编译器生成的相对变量和方法地址)。如果我们将DOM树视为内存并使用ID与使用类进行比较,则!important
表示绝对内存地址,但#name
表示相对地址(相对于div.tab1 .name
)。
我见过ID的另一个支持点是,带有ID的元素在javascript中更容易成为全局属性。我的回答:再次,这就像说Visual Basic中的全局变量更方便。问题是你不能保持足够大的全局(或任何其他)命名空间,而不引入像level1_level2_name这样的命名层次结构,这只是将一个命名空间机制替换为另一个命名空间机制的黑客攻击。 DOM树很方便组织命名空间,为什么要忽略它呢?
使用下划线在ID内部进行命名空间模拟是不好的,因为您无法建立命名上下文,并且必须复制代码中的所有路径。这实际上意味着您将无法使用CSS preprocessors来修复CSS无法使用上下文。
答案 0 :(得分:13)
快速回答:这是一个最佳实践,如果你只有一个实例,而你只想要一个实例,那么使用一个ID来定义它应该只有一个实例。
这就像常量变量与常规变量之间的差异。您可以使用常规变量作为常量变量,但如果它是预期变量,则更好地定义它。
它让其他程序员(和你自己)知道有关该对象的更多信息。
答案 1 :(得分:7)
我一般同意你的观点:使用类更清晰;你可以创建“命名空间”并用它们清理级联;它们可以合并:class='class1 class2'
。
ID仍然占有一席之地,尤其是在寻址稍后将在JavaScript中更改的元素时(例如隐藏的叠加层)。
答案 2 :(得分:4)
我看一下类和id,就像我看一个(编程)类和一个对象一样。对象是类的一个特定实例。我希望我的所有类共享一定数量的行为,但单个对象可能有自己独特的属性。 CSS类用于将属性应用于广泛的类似项目组,ID用于特定项目,特殊性层次结构反映了这一点。
要反转您的问题,为什么在使用非常特定的标签选择器实现相同效果时,根本使用类?为了易于使用,重复性和意图清晰。
答案 3 :(得分:2)
对我来说,我喜欢在HTML元素上使用绝对唯一的ID,以及可能不是唯一的(不管它们是否是)的类。
例如,我会使用<div id="header">
,因为只能有一个标题。但如果页面上可能有多个(即使只有一个),我会使用<div class="profile">
。这使我更容易理解CSS。
答案 4 :(得分:1)
“DOM树很方便组织命名空间,为什么要忽略它?”
因为DOM可以因AJAX或其他javascripty-goodness而改变。
我喜欢@ocdcoder的常数/变量类比。有时您想要完全引用该特定元素。必须遵守严格的DOM名称空间是一件根本无法维护的紧身衣,imho。
答案 5 :(得分:1)
我认为在没有解决使用类和ID的根本原因的情况下,讨论是不完整的。说在任何情况下应该使用它们在一般和历史上都不能很好地工作。
类的最初目的是将演示文稿附加到文档,或者将样式作为单独的关注点而不是文档本身的结构。如果我错了,请纠正我,但我认为你正在努力解决将语义信息附加到元素而不仅仅是样式的问题。如果情况确实如此,那么类为我们提供了两个目的 - 控制表示,表演和语义标签。 ID用作充当唯一语义标记的目的。
XML具有高度可扩展性,允许在XHTML文档中使用的名称空间在作者认为合适的情况下为文档赋予意义。但HTML中没有,可能是浏览器不兼容或不易使用(如Tom所提到的),但大多数网页和应用程序都没有采用在XHTML中使用命名空间的路径。
HTML规范作者肯定看到了将语义数据附加到HTML文档的明显需求,并在HTML5中引入了可以分配给任何元素的data-
属性。我认为,如果它是你所关注的语义,这绝对是迄今为止最好的方法,但是浏览器不兼容性总是在确定哪个规范变得更加普遍时起主要作用,我希望IE没有他们的发言权时间。
答案 6 :(得分:1)
使用id
属性可以链接到元素E.g.如果你有这个HTML:
<div id="log-in">
您可以使用href="#log-in"
链接到页面的登录部分。
通常,类通常是识别页面组件的最方便和最合适的方法。但是假设你有一个每页只出现一次的元素,假设你可以给它一个合适的名字或者生成一个,我认为你不可能使用id
来解决问题。它