Question

它取决于您使用的平台，还是大多数开发人员建议/遵循的常规约定？

有几种选择：

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

我认为上面的＃1和＃3最有意义，因为它们可以更好地使用Javascript。

对此有正确的答案吗？

Answer 1

没有一个。

我一直使用下划线，因为连字符弄乱了我的文本编辑器（Gedit）的语法高亮，但这是个人偏好。

我已经看到所有这些惯例都在各处使用。使用您认为最好的那个 - 看起来最好/最容易为您阅读的那个，以及最容易打字，因为您将使用它很多。例如，如果您在键盘底部有下划线键（不太可能，但完全可能），则坚持使用连字符。只要选择最适合自己的东西。此外，所有这三个约定都易于阅读。如果您在团队中工作，请记住遵守团队指定的约定（如果有的话）。

2012年更新

我已经改变了我的编程方式。我现在使用camel case（thisIsASelector）而不是连字符;我发现后者相当丑陋。使用你喜欢的任何内容，这可能会随着时间的推移而轻易改变。

2013年更新

看起来我喜欢每年混合一下......在切换到Sublime Text并使用Bootstrap一段时间之后，我又回到了破折号。对我来说，他们看起来比un_der_scores或camelCase更清洁。 我的原始观点仍然存在：不是标准。

更新2015

这里有约定的有趣角落案例是Rust。我非常喜欢这种语言，但如果您使用underscore_case以外的任何内容定义内容，编译器会发出警告。您可以关闭警告，但有趣的是编译器默认情况下强烈建议使用约定。我想在较大的项目中它会导致更清晰的代码，这不是坏事。

2016年更新（you要求）

我已经为我的项目采用了BEM标准。类名最终变得非常冗长，但我认为它为类和CSS提供了良好的结构和可重用性。我认为BEM 实际上是一个标准（所以我的no也许变成yes但是你仍然决定在项目中使用它。最重要的是：与您的选择保持一致。

Answer 2

google提供了css＆amp; html样式指南，建议始终使用连字符：https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters。

Answer 3

我建议您使用下划线而不是连字符（ - ），因为......

<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 for id和camelCase for class。

Answer 4

没有就HTML和CSS的命名约定达成一致。但是你可以围绕对象设计构建你的命名法。更具体地说，我称之为所有权和关系。

所有权

描述对象的关键字可以用连字符分隔。

车新出身的右

描述对象的关键字也可以分为四类（应该从左到右排序）：对象，对象描述符，动作和动作描述符。

car - 名词和对象
  new - 形容词，以及更详细地描述对象的对象描述符   转动 - 一个动词，一个属于该对象的动作
  right - 一个形容词，以及一个更详细描述该动作的动作描述符

注意：动词（动作）应该是过去时（转动，做，跑等）。

关系

对象也可以具有父和子等关系。 Action和Action-Descriptor属于父对象，它们不属于子对象。对于对象之间的关系，您可以使用下划线。

车新出身的right_wheel - 左 - 接通左


car-new-turned-right（遵循所有权规则）

wheel-left-turned-left（遵循所有权规则）

car-new-turned-right_wheel-left-turned-left（遵循关系规则）

最终说明：

因为CSS不区分大小写，所以最好以小写（或大写）形式写所有名称;避免使用骆驼案或pascal-case，因为它们会导致模糊的名字。
知道何时使用课程以及何时使用ID。它不只是在网页上使用一次id。大多数情况下，您希望使用类而不是ID。 Web组件（如按钮，表单，面板等）应始终使用类。 Id很容易导致命名冲突，应谨慎使用命名空间。上述所有权和关系的概念适用于命名类和ID，并将帮助您避免命名冲突。
如果您不喜欢我的CSS命名约定，还有其他几个：结构命名约定，表示命名约定，语义命名约定，BEM命名约定，OCSS命名约定等。

Answer 5

还需要考虑另一种替代标准：

<div id="id_name" class="class-name"></div>

在你的剧本中：

var variableName = $("#id_name .class-name");

这只是对变量，id和类分别使用camelCase，under_score和hyphention。我在几个不同的网站上读过这个标准。尽管在css / jquery选择器中有一些冗余，但冗余会使捕获错误变得更容易。例如：如果您在CSS文件中看到.unknown_name或#unknownName，则表示您需要弄清楚实际上指的是什么。

Answer 6

许多人更喜欢CSS id和类名中的连字符的另一个原因是功能。

使用键盘快捷键，例如选项 + 左 / 右（或 ctrl + left / 右）逐字遍历代码会停止每个破折号处的光标，允许您使用键盘快捷键精确遍历id或类名。下划线和camelCase不会被检测到，光标会在它们上方漂移，就好像它只是一个单词一样。

Answer 7

我刚刚开始学习XML。下划线版本帮助我将与XML相关的所有内容（DOM，XSD等）与Java，JavaScript（驼峰案例）等编程语言分开。我同意你的看法，使用编程语言允许的标识符会更好。

编辑：可能不相关，但这里有一个关于命名XML元素的规则和建议的链接，我在命名id时遵循这些规则和建议（部分＆＃34; XML命名规则＆＃34;＆＃34;最佳命名实践＆＃34 ;）

http://www.w3schools.com/xml/xml_elements.asp

Answer 8

我认为这取决于平台。在.Net MVC中进行开发时，我使用引导程序样式的小写字母和连字符作为类名，但是对于ID，我使用PascalCase。

这样做的原因是我的视图得到了强类型视图模型的支持。 C＃模型的属性是Pascal情况。为了使用MVC进行模型绑定，有意义的是，绑定到模型的HTML元素的名称与pascal情况下的视图模型属性一致。为简单起见，我的ID与元素名称使用相同的命名约定，除了单选按钮和复选框外，它们需要命名输入组中每个元素的唯一ID。

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

8 个答案: