命名元素 - 最佳实践

Naming elements - best practices

在命名元素时,我应该使用 'class' 命名为 CSS 和 'id' 命名为 JS 吗? 有不同的经验法则吗?我应该只使用一个名字吗? 欢迎任何insights/suggestions。

这比简单地使用 class and/or id 命名约定要复杂一些。 事实上,就命名和识别元素而言,JavaScript 和 CSS 应该以截然不同的方式处理。我建议查看 this guide on beginning CSS or if you want to challenge yourself and build styles that are really versatile and reusable, check out this article on semantic class names or Meduim's CSS is Actually Pretty F***n good by @fat (one of the guys who made the bootstrap lib)

请注意,这些都是意见,您在 CSS 方面有很大的自由度,这不仅关乎创造力,而且还创造了一些东西,如果您死了,其他人也可以理解并利用您的代码。

JavaScript 如果您不遵循一些好的做法,则更容易变成一团糟,我会查看此 link 底部的一些内容 post,但重要的是你是一致的,冗长的,并且使用注释和测试。关于命名 HTML 用于操作它们的元素,如果您 确定 您将只有 一个 每个页面要执行某些操作的元素(例如登录表单上的用户名字段)比 Id 是可以接受的并且有意义,只要命名是一致的(例如:不要在登录表单上调用您的用户名字段 id="name",因为这可能会被误解,而是将其称为 id="username"id="login-username")使名称清晰不会浪费足够多的内存和网络带宽,以取代未来开发人员可能试图弄清楚 id 和 classes.

的所有问题

如果使用 class 通过 javascript 识别页面中的元素集合是有意义的 - 请注意使用 class 名称专门用于您的 javascript - 也许在它前面加上 js-<classname> 或使它成为有状态的名称,例如 is-selected 以便您 1) 在查看它时知道它可能对在 [= 中进行操作很有用60=] 代码,以及 2) 这样它就不会与 CSS.

中的样式混淆或混淆

简而言之,您的目标应该是保持命名的一致性和清晰度 - 有时它可能意味着 id(当您只希望页面上有一个内容时)而其他时候可能成为 class(页面上可能有也可能没有很多)- 请考虑一下它对第一次查看它的人是否有意义。

link转储:

请注意,那里有很多意见 - 同样重要的是保持一致,而不是人们所说的年度最佳做法(但你会发现人们倾向于遵循一些命名基础知识,例如全部大写对于常量和 javascript 变量等的驼峰命名法)- 阅读,选择你喜欢的并使用它。