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

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

有几种选择：

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

我在想上面的＃1和＃3最有意义，因为它们在Javascript中的表现更好。

有正确的答案吗？

没有一个。

由于连字符弄乱了我的文本编辑器（Gedit）的语法突出显示，因此我一直使用下划线，但这是个人喜好。

我已经在所有地方看到了所有这些约定。使用您认为最好的那一种-对您来说看起来最好/最容易阅读，也最容易打字的那一种，因为您会经常使用它。例如，如果您的下划线键位于键盘的底部（不太可能，但完全可能），则请使用连字符。只要选择最适合自己的东西即可。此外，所有这三个约定都易于阅读。如果您在团队中工作，请记住遵守团队指定的约定（如果有）。

更新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不良功能集。

谷歌有css＆html样式指南，建议始终使用连字符：https : //google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters。

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

<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;

破折号样式将是google代码样式，但我不太喜欢。我更喜欢id的TitleCase和上课的camelCase。

tl; dr;

没有一个真正的答案。您可以选择其中的一种，也可以根据与您一起工作的人的实际需要创建自己的标准。而且它100％取决于平台。

原始帖子

仅需考虑另一种替代标准：

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

在您的脚本中：

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

这仅将camelCase，under_score和连字符分别用于变量，id和类。我已经在几个不同的网站上了解了此标准。尽管在css / jquery选择器中有点多余，但是冗余使捕获错误变得更加容易。例如：如果您看到.unknown_name或#unknownName在CSS文件中，则知道需要弄清楚实际指的是什么。

更新2019

（连字符称为“ kebab-case”，下划线称为“ snake_case”，然后您具有“ TitleCase”，“ pascalCase”）

我个人不喜欢连字符。我最初将其发布为替代方法（因为规则很简单）。但是，连字符使选择快捷方式非常困难（双击，ctrl/ option+ left/ right和ctrl/ cmd+D在vsCode中。此外，类名和文件名是连字符起作用的唯一位置，因为它们几乎总是在引号或CSS中，等等。但是捷径的事情仍然适用。

除了变量，类名和ID，您还希望查看文件名约定。和Git分支。

我办公室的编码小组实际上在一两个月前开会，讨论我们如何命名事物。对于git分支，我们无法在321-the_issue_description或321_the-issue-description之间进行选择。（我想要321_theIssueDescription，但我的同事不喜欢这样。）

一个示例，以演示如何使用其他人的标准...

Vue.js确实有一个标准。实际上，它们对其中的几个项目有两个替代标准。我不喜欢两个版本的文件名。他们推荐"/path/kebab-case.vue"或"/path/TitleCase.Vue"。前者很难重命名，除非您专门尝试重命名其中的一部分。后者不利于跨平台兼容性。我希望"/path/snake_case.vue"。但是，在与其他人或现有项目一起工作时，遵循已制定的标准很重要。因此，即使我完全抱怨它，我还是使用kebab-case作为Vue中的文件名。因为不遵循，就意味着更改了vue-cli设置的许多文件。

没有关于HTML和CSS的命名约定。但是您可以围绕对象设计来构造术语。更具体地说，我称之为所有权和关系。

所有权

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

汽车新右转

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

汽车-一个名词，一个
新对象-一个形容词，以及一个更详细地描述对象的对象描述符
-动词和属于该对象
的动作-​​形容词和一个动作描述符动作更详细

注意：动词（动作）应处于过去态（转动，完成，奔跑等）。

关系

对象还可以具有父级和子级之类的关系。Action和Action-Descriptor属于父对象，但不属于子对象。对于对象之间的关系，可以使用下划线。

汽车新向右转左车轮向左转

• 右转新车（遵循所有权规则）
• 向左转左（遵循所有权规则）
• car-new-turned-right_wheel-left-turned-left（遵循关系规则）

最后说明：

• 因为CSS不区分大小写，所以最好用小写（或大写）写所有名称；避免使用驼峰式或帕斯卡式大小写，因为它们可能导致名称不明确。
• 知道何时使用类以及何时使用id。这不仅仅是在网页上一次使用ID。大多数时候，您想使用类而不是ID。Web组件（按钮，表单，面板等）应始终使用类。ID很容易导致命名冲突，因此应谨慎使用ID来标记您的标记。以上所有权和关系的概念适用于命名类和ID，并有助于您避免命名冲突。
• 如果您不喜欢我的CSS命名约定，那么还有其他几种：结构性命名约定，演示性命名约定，语义命名约定，BEM命名约定，OCSS命名约定等。

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

使用option+ left/ right（在Windows上为ctrl+ left/）right上的键盘快捷键逐字遍历代码，可以将光标停在每个破折号处，从而允许您使用键盘快捷键精确遍历id或类名。下划线和camelCase不会被检测到，并且光标将在其上漂移，就好像它们都是一个单词一样。

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

编辑：可能不相关，但是这里是有关命名XML元素的规则和建议的链接，我在命名ID时遵循这些规则（“ XML命名规则”和“最佳命名做法”部分）。

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

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

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