命名元素 - 最佳实践

时间:2015-01-03 05:35:06

标签: css naming-conventions

在命名元素时,我应该使用' class' CSS的名称和' ID' JS的名字?  有不同的经验法则吗?我应该只使用一个名字吗? 任何见解/建议都会受到欢迎。

1 个答案:

答案 0 :(得分:5)

比简单地使用class和/或id作为命名约定要复杂一点。 事实上,就命名和识别元素而言,JavaScript和CSS应该以非常不同的方式处理。我建议您查看this guide on beginning CSS或者如果您想挑战自己并构建真正多功能且可重复使用的样式,请查看@fat的this article on semantic class namesMeduim's CSS is Actually Pretty F***n good(其中一位是制作了bootstrap lib)

请注意,这些是意见,你有很多CSS的自由,它是关于创造性的,但也有一些东西,如果你死了别人可以理解和利用你的代码。

如果你不遵循一些好的做法,JavaScript会更容易变成一团糟,我会查看本文底部的一些链接,但重要的是你是一致的,详细,并使用注释和测试。关于命名HTML元素以进行操作,如果您 确定 ,那么每个页面只有一个元素,您要执行某些操作只要命名是一致的(例如:不要在登录表单上调用您的用户名字段{{},可以接受({登录表单上的用户名字段)而不是Id的操作是有意义的。 1}}因为这可能被误解,而是称之为id="name"id="username")明确名称不会浪费足够的内存和网络带宽来代替未来开发人员可能遇到的所有麻烦试图找出id和类的内容。

当使用类通过javascript识别页面中的元素集合是有意义的时候 - 明确使用专门用于javascript的类名 - 可以在其前面添加id="login-username"或使其成为有状态名称例如js-<classname>,以便你1)知道什么时候看它可能是有用的操作javascript代码,2)所以它不会混淆或复杂你的风格CSS。

简而言之,您的目标应该是在命名方面保持一致性和清晰度 - 有时可能意味着is-selected(当您只希望页面上有某个内容时),有时则可能是id(当页面上可能有或许没有很多内容时) - 只要考虑一下第一次看到它的人是否有意义。

link dump:

请注意有很多意见 - 再一次更重要的是要保持一致,而不是人们所说的是一年中最好的做法(但你会发现人们倾向于遵循一些命名基础,例如常量的所有上限和camelCase for javascript变量等) - 阅读,选择你喜欢的东西并继续使用它。