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

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

有几种选择：

id=“someIdentifier”

-看起来与javascript代码非常一致

id=“some identifier”

-看起来更像html中类似html5的属性和其他内容

id=“some_identifier”

-看起来与ruby代码非常一致，仍然是Javascript内部的有效标识符

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

有正确的答案吗？

没有

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

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

2012年更新

随着时间的推移，我改变了编程方式。我现在使用驼峰格（

ThisisSelector

）而不是连字符；我觉得后者相当难看。使用你喜欢的任何东西，这很容易随着时间的推移而改变

2013年更新

看起来我喜欢每年把事情搞混。。。在切换到升华文本并使用引导程序一段时间后，我又回到了破折号。对我来说，现在他们看起来比un_der_分数或camelCase干净多了不过，我的原始观点仍然成立：没有标准。

2015年更新

这里有一个关于惯例的有趣的例子。我真的很喜欢这种语言，但是如果您使用

下划线\u case

以外的任何东西定义东西，编译器会警告您。您可以关闭警告，但有趣的是，编译器强烈建议默认使用约定。我想在更大的项目中，它会带来更干净的代码，这并不是坏事

更新2016（要求提供）

我已经采用了我未来项目的标准。类名最终非常冗长，但我认为它为类和CSS提供了良好的结构和可重用性。我认为BEM实际上是一个标准（因此我的

否

可能变成

是

），但在项目中使用什么仍然取决于您。最重要的是：与你的选择保持一致

更新2019（要求提供）

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

不过，我还是选择了贝姆。它很冗长，但是名称空间使得在React组件中使用它非常自然。在进行浏览器测试时，它还可以用于选择特定元素

OOCSS和BEM只是CSS标准的一部分。选择一个适合你的——它们都充满了妥协，因为CSS并没有那么好

更新2020

---

今年的更新很无聊。我还在用边界元法。由于上面列出的原因，我的立场与2019年的更新相比并没有真正改变。使用适合您的、可随团队规模扩展的工具，并尽可能多或少地隐藏CSS糟糕的特性集。

我最近刚开始学习XML。下划线版本帮助我将所有与XML相关的内容（DOM、XSD等）与Java、JavaScript（camel-case）等编程语言分开。我同意你的观点，使用编程语言中允许的标识符看起来更好

编辑：可能不相关，但这里有一个链接，提供了命名ID时遵循的有关命名XML元素的规则和建议（“XML命名规则”和“最佳命名实践”部分）

---

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

所有权

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

新车右转

描述对象的关键字也可以分为四类（从左到右排列）： 对象、对象描述符、操作和操作描述符

汽车-一个名词和一个物体
新建-形容词和更详细描述对象的对象描述符
翻转-一个动词和一个属于该对象的动作
右-形容词和动作描述符，用于更详细地描述动作

注意：动词（动作）应该是过去时（turn、did、ran等）

关系

对象还可以具有类似父对象和子对象的关系。动作和动作描述符属于父对象，而不属于子对象。对于对象之间的关系，可以使用下划线

汽车-新车-右转\u车轮-左转-左转

• 新车右转（遵循所有权规则）
• 车轮左转向左（遵循所有权规则）
• car-new-turned-right\u wheel-left-turned-left（遵循关系规则）

最后注释：

• 因为CSS不区分大小写，所以最好用小写（或大写）来写所有的名字；避免使用驼峰大小写或pascal大小写，因为它们可能导致名称不明确
• 知道什么

  <form name="myForm">
    <input name="myInput" id="my-Id" value="myValue"/>
  </form>
  
  <script>
    var x = document.myForm.my-Id.value;
    alert(x);
  </script>
  

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

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

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