html/css id 和类的标准命名约定是什么?

新手上路,请多包涵

这取决于您使用的平台,还是大多数开发人员建议/遵循的通用约定?

有几种选择:

  1. id="someIdentifier"' - 看起来与javascript代码非常一致。
  2. id="some-identifier" - 看起来更像是 html5 类属性和 html 中的其他内容。
  3. id="some_identifier" - 看起来与 ruby 代码非常一致并且仍然是 Javascript 中的有效标识符

我认为上面的 #1 和 #3 最有意义,因为它们与 Javascript 配合得更好。

这个问题有正确答案吗?

原文由 egervari 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 673
2 个回答

没有一个。

我一直使用下划线,因为连字符弄乱了我的文本编辑器 (Gedit) 的语法突出显示,但这是个人偏好。

我已经看到所有这些约定在各处使用。使用您认为最好的 - 看起来最好/最容易阅读的,以及最容易打字的,因为您会经常使用它。例如,如果您的下划线键位于键盘下方(不太可能,但完全有可能),那么请坚持使用连字符。随心所欲地选择最适合自己的。此外,所有这 3 个约定都易于阅读。如果您在团队中工作,请记住遵守团队指定的约定(如果有)。

2012 年更新

随着时间的推移,我改变了我的编程方式。我现在使用驼峰式 ( thisIsASelector ) 而不是连字符;我觉得后者相当丑陋。使用 喜欢的任何东西,这很容易随着时间的推移而改变。

2013 年更新

看起来我每年都喜欢把东西混在一起……在切换到 Sublime Text 并使用 Bootstrap 一段时间后,我又回到了破折号。现在对我来说,它们看起来比 un_der_scores 或 camelCase 干净得多。 不过,我原来的观点仍然成立: 没有 标准。

2015 年更新

这里有一个有趣的约定俗成的极端情况是 Rust 。我真的很喜欢这种语言,但是如果您使用 underscore_case 以外的任何东西来定义东西,编译器会警告您。您可以关闭警告,但有趣的是,编译器默认强烈建议使用约定。我想在更大的项目中它会导致更清晰的代码,这不是坏事。

2016 年更新 要求的)

我已经为我未来的项目采用了 BEM 标准。类名最终变得非常冗长,但我认为它为类和它们附带的 CSS 提供了良好的结构和可重用性。我想 BEM 实际上是 一个标准(所以我的 no 变成了 yes 也许),但它仍然取决于你决定在项目中使用什么。最重要的是:与您的选择保持一致。

2019 年更新 要求的)

在很长一段时间没有编写 CSS 之后,我开始在一个在他们的产品中使用 OOCSS 的地方工作。我个人觉得到处乱扔类很不愉快,但不必一直在 HTML 和 CSS 之间跳转感觉非常有效率。

不过,我仍然选择 BEM。它很冗长,但命名空间使得在 React 组件中使用它非常自然。它也非常适合在浏览器测试时选择特定元素。

OOCSS 和 BEM 只是现有的一些 CSS 标准。选择一个适合你的——它们都充满了妥协,因为 CSS _并不是那么好_。

2020 年更新

今年无聊的更新。我仍在使用 BEM。由于上述原因,我的立场与 2019 年更新相比并没有真正改变。使用适合您的方法,根据您的团队规模进行缩放,并根据需要隐藏尽可能多或尽可能少的 CSS 不良功能集。

原文由 Bojangles 发布,翻译遵循 CC BY-SA 4.0 许可协议

TL;博士; 2022年

现在看来“-”将成为行业标准。

# 弃用

我建议您使用下划线而不是连字符 (-),因为 …

 <form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

您可以像这样轻松地通过 id 访问值。但是,如果您使用连字符,则会导致语法错误。

这是一个旧示例,但它可以在没有 jquery 的情况下工作-:)

感谢@jean_ralphio,有解决方法可以避免

var x = document.myForm['my-Id'].value;

破折号风格将是一种谷歌代码风格,但我不太喜欢它。我更喜欢 TitleCase 的 id 和 camelCase 的类。

原文由 Weijing Jay Lin 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏