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

Question

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

有几种选择:

1. id="someIdentifier"' - 看起来与javascript代码非常一致.
2. id="some-identifier" - 看起来更像html5类似的属性和html中的其他东西.
3. 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年更新(您要求)

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

Answer 2

谷歌有css&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 - 一个名词,一个
新的对象- 一个形容词,一个更详细描述对象的对象描述符
- 一个动词,一个属于该对象
的动作 - 一个形容词,一个描述的动作描述符更详细的行动

注意:动词(动作)应该是过去时(转动,做,跑等).

关系

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

汽车新出身的right_wheel左出身的左

• car-new-turned-right(遵循所有权规则)
• wheel-left-turned-left(遵循所有权规则)
• car-new-turned-right_wheel-left-turned-left(遵循关系规则)

最后的说明:

• 因为CSS不区分大小写,所以最好用小写(或大写)来写所有名称; 避免骆驼案或pascal案,因为它们可能会导致模糊的名字.
• 知道何时使用类以及何时使用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选择器中有一些冗余,但冗余会使捕获错误变得更容易.例如:如果你看到.unknown_name或#unknownName在你的CSS文件中,你知道你需要弄清楚它实际上指的是什么.