无视速度和兼容性,为什么不只使用类,从不在HTML/CSS中使用ID?

alp*_*pav 9 html javascript css

我只使用类,从不使用ID.许多人喜欢使用ID,原因各不相同.

我在stackoverflow上看到了很多关于ID和类的问题,但没有人解决纯代码组织的观点,无论兼容性和运行时性能如何.

从代码组织的角度来看,我认为使用ID就像在Visual Basic代码中使用全局变量一样糟糕.

一个原因是ID必须是唯一的,这会在代码的不同独立部分之间引入不必要的和不良的依赖关系(控制HTML DOM树的不同部分).

另一个原因是,创建新的类名实际上比ID名称更容易,因为使用ID您必须担心全局范围和类名,您只需要担心局部范围内的唯一性,与局部变量相同的好处.

大多数人会争辩说,ID的解决方式比同类更好,我同意这一点.但随着浏览器变得越来越先进,javascript和计算机的CSS寻址的本机实现变得越来越快,性能变得越来越不重要.因此,让我们忽视它,只关注当前问题背景下的代码组织.

这个讨论从这里开始,但是我可能错误的建议会产生负面影响并且变得太大而无法保留评论,因此我在这里尝试将其转换为积极且易于管理的东西.

支持ID的一个可见点是将它们用作规则优先级的工具,因为#name的优先级高于.name的优先级.我的回答是:用ID来提高优先级是坏的黑客攻击,它的清洁,有更多的自由,如果你使用的身体和树的其他级别之间插入额外的根元素,例如优先级body div div span.class1{}高于body div span.class1{}高于body span.class1{}高于span.class1{}.另一个用于此目的的工具是!important.有些人可能会争辩说,当页面结构发生变化时,使用更多的根元素意味着更多的困难,但我不认为是这种情况,因为你永远不必在body之间放置任何东西并指定优先级div.这些div总是可以保持在身体之下,而不是其他所有内容.

另一个有趣的关联带来了指针,ID也不错,因为指针也不错.我的回答:如果你在代码中对绝对内存地址进行硬编码,指针会很糟糕.使用相对指针总是更好(例如:在8086 CPU中使用段(CS,DS,SS,ES);由编译器生成的相对变量和方法地址).如果我们将DOM树视为内存并使用ID与使用类进行比较,则#name表示绝对内存地址,但div.tab1 .name表示相对地址(相对于div.tab1).

我在ID中看到的另一个支持点是,具有ID的元素在javascript中更容易成为全局属性.我的回答:再次,这就像说Visual Basic中的全局变量更方便.问题是你不能保持足够大的全局(或任何其他)命名空间,而不引入像level1_level2_name这样的命名层次结构,这只是将一个命名空间机制替换为另一个命名空间机制.DOM树很方便组织命名空间,为什么要忽视呢?

使用下划线在ID内部进行命名空间模拟是不好的,因为您无法建立命名上下文,并且必须复制代码中的所有路径.这实际上意味着您将无法使用CSS 预处理器来修复CSS无法使用上下文.

Sea*_*aux 13

快速回答:它是一种最佳实践,如果你只有一个实例,而你只需要一个实例,那么使用一个ID来定义它应该只有一个实例.

这就像常量变量与常规变量之间的差异.您可以使用常规变量作为常量变量,但如果它是预期变量,则更好地定义它.

它让其他程序员(和你自己)知道有关该对象的更多信息.

  • @Dave,我确实陈述了原因,请阅读我的其余部分答案. (7认同)

Pek*_*ica 7

我总体上同意你的观点:使用类更清晰; 你可以创建"命名空间"并用它们清理级联; 他们可以合并:class='class1 class2'.

当您在页面上寻址真正独特的元素时,ID仍然有它们的位置,特别是在寻址稍后将在JavaScript中更改的元素时(例如隐藏的叠加层).