03月07, 2018

给HTML元素分配与语义相关而不是表现相关的ID和类名

在给 HTML 元素分配 ID 和类名时,一定要尽可能保持名称与语义相关,例如,如果希望所有表单通知消息显示为红色,可以给他们分配类名为.warnning 或.notification,而不是给.red。

当然,只要页面上没有其他红色的元素,这就没问题。但是,如果希望让 4 个必需的表单标签也显示为红色,就必须猜测这个类引用的是哪种元素,这时情况下就开始有些混乱了。想象一下,如果在整个网站上到处使用表现性元素,代码会多么混乱。如果决定把表单通知由红色改为黄色,就更复杂了。在这种情况下,必须修改所有类名,否则名为 red 的元素就会显示为黄色。

因此,应该根据“它们是什么”来为元素命名,而不应该根据“它们的外观如何”来命名。这种方式会让代码更有意义,并且避免代码与设计不同步。有意义的类名的最大优点是可以在整个网站中重用它们。例如,还可以在其他类型的消息上使用.notification 类,可以根据它们的在文档中的位置应用完全不同的样式。

本文链接:https://www.chenliqiang.cn/post/18.html

-- EOF --