为什么不在CSS中使用ID

有时,当我回顾代码时,我建议一个同事不要使用CSS样式选择器的ID选择器,考虑到这一点,这里列出了为什么我避免在我的样式表中使用id,更喜欢使用class来代替。

2018年11月5日

有时,当我回顾代码时,我建议一个同事不要使用CSS样式选择器的ID选择器,并且不可避免地会被问为什么。我在就像排队,泡杯茶,或者早上6点在黑暗中化妆一样,应该避免使用CSS中的ID选择器,是不需要思考的。我在这么长的时间中一直是这么认为的,考虑到这一点,这里列出了为什么我避免在我的样式表中使用id,更喜欢使用class来代替。

1.Class的独特性比Id的低

id具有比class有更高的独特性。一个单独的class不能改写属于id的样式,如果要改写的话,你需要更多的id或使用!重要的是,它可以在你的样式表中开始特殊性的选择。您甚至需要重新写你的html。理论上样式ID应该要易于重写和扩展,使您的CSS可维护和方便地工作。

2.Class可以被重新使用

id应该在页面上是唯一的。这意味着,如果您将样式附加到id,则无法在同一网页中重用它。但是,class确可以出现在同一页上的几个HTML元素上,能够重用样式是优点之一。例如,使用id直接对列表元素<li>进行调整是很麻烦的。虽然有的时候不是每种样式都需要重复使用,但可以选择重复使用是很好的。

3.一贯的规矩

对于在代码库中工作的开发人员来说,知道css是附加到class中的,但是id是用于其他的方面更容易一点。对于很多人来说仅使用class属性来定义样式说更容易理解,而不是使用class和id属性的组合。

4.元素可以有几个Class,但只有一个Id

可以将许多class添加到HTML元素中,例如<div class=”text-bold banner-text js-banner-text”></div>。这里有用于样式的class和一个JavaScript钩子,它们都在class属性中组合在一起。使用这些规定是可以命名id,但请记住,每个元素持超过1个的id是无效的。这意味着您不能像上面的class那样重载id名称,例如<div id=”text-bold banner-text js-banner-text”></div>。使用class的组合来对元素进行样式化是常见的。另外,仅由JavaScript或自动化测试使用的选择器命名约定是个不错的想法。例如,如果我看到一个以js-为前缀的类,我知道它在JavaScript的某个地方使用,并且不负责样式,因此在编辑之前应该谨慎。(通常也将qa前缀用作测试的挂钩。)我个人喜欢将所有挂钩和样式化class放在一个属性中,而不是在class和id之间共享它们。

注释

这并不是说你不应该在你的HTML中使用id。id除了一个CSS选择器之外,在网页中有很多用途。例如,作为页锚、片段标识符或链接标签以形成字段。


作者: Claire Parker-Jones

翻译:沈明请

责编:谢峥

原文链接

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注