首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >html/css和类的标准命名约定是什么?

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

Stack Overflow用户
提问于 2011-05-17 16:31:51
回答 5查看 220.3K关注 0票数 326

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

有几个选项:

  1. id="someIdentifier"' -看起来与javascript代码非常一致。
  2. id="some-identifier" -看起来更像HTML5-类似于html.
  3. id="some_identifier"中的属性和其他东西-看起来与ruby代码非常一致,并且仍然是Javascript

中的有效标识符

我认为上面的#1和#3最有意义,因为它们在Javascript中表现得更好。

这个问题有正确的答案吗?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-05-17 16:38:47

根本就没有。

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

我见过到处都在使用这些约定。使用你认为最好的--看起来最好的/最容易阅读的,以及最容易输入的,因为你会经常使用它。例如,如果您的下划线键位于键盘的底部(不太可能,但完全有可能),那么请坚持使用连字符。只需要遵循对你最好的选择。此外,所有这3个约定都很容易阅读。如果您在团队中工作,请记住遵守团队指定的约定(如果有的话)。

更新2012

随着时间的推移,我已经改变了我的编程方式。我现在使用驼峰式大小写(thisIsASelector)而不是连字符;我发现后者相当难看。使用你喜欢的任何东西,这很容易随着时间的推移而改变。

更新2013

看起来我每年都喜欢把事情搞混。在切换到Sublime Text并使用Bootstrap一段时间后,我又回到了dashes。现在在我看来,它们比un_der_scores或camelCase干净多了。不过,我最初的观点仍然成立: there isn a standard。

更新2015

这里使用约定的一个有趣的角落案例是Rust。我真的很喜欢这种语言,但是如果你使用underscore_case以外的任何东西来定义东西,编译器会警告你。您可以关闭该警告,但有趣的是,编译器在默认情况下强烈建议使用一个约定。我想在更大的项目中,这会导致代码更干净,这并不是坏事。

更新2016 (you要求)

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

更新2019 (you要求)

在很长一段时间没有编写CSS之后,我开始在他们的一个产品中使用OOCSS的地方工作。我个人觉得到处乱扔垃圾类是很不愉快的,但不用一直在HTML和CSS之间来回切换感觉很有成效。

尽管如此,我还是选择了BEM。它很冗长,但是名称空间使得在React组件中使用它非常自然。它也非常适合在浏览器测试时选择特定的元素。

OOCSS和BEM只是CSS标准中的一部分。选择一个适合你的-它们都充满了妥协,因为CSS就是不那么好。

更新2020

今年的更新很无聊。我仍然在使用BEM。由于上面列出的原因,我的立场与2019年的更新相比并没有真正改变。使用适合您的应用程序,根据您的团队规模进行扩展,并根据您的喜好隐藏或隐藏CSS的糟糕功能集。

票数 343
EN

Stack Overflow用户

发布于 2016-01-17 19:00:00

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

代码语言:javascript
复制
<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,可以通过以下方式避免工作:

代码语言:javascript
复制
var x = document.myForm['my-Id'].value;

破折号风格可能是google代码风格,但我真的不喜欢它。我更喜欢id为TitleCase,类为camelCase。

票数 34
EN

Stack Overflow用户

发布于 2014-12-03 18:50:59

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

所有权

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

car-新转右

描述对象的关键字也可以分为四个类别(应该从左到右排序):对象、对象描述符、操作和操作描述符。

car -名词和宾语

new -一个形容词和一个更详细地描述对象的对象描述符

turned动词和属于对象的操作

right -一个形容词和一个动作描述符,用于更详细地描述动作

注意:动词(动作)应该是过去式(turned,did,ran等)。

Relationship

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

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

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

结束语:

  • 因为CSS是不区分大小写的,所以最好把所有的名字都写成小写(或大写);避免使用驼峰大小写或pascal大小写,因为它们会导致名字不明确。
  • 知道什么时候使用类,什么时候使用id。这不仅仅是一个id在网页上被使用一次的问题。大多数情况下,您希望使用类而不是id。像(按钮、表单、面板、...etc)这样的Web组件应该总是使用一个类。Id很容易导致命名冲突,在命名标记时应该谨慎使用。上述所有权和关系概念适用于命名类和ids,并将帮助您避免命名conflicts.
  • If您不喜欢我的CSS命名约定,还有其他几种命名约定:结构命名约定、表示命名约定、语义命名约定、BEM命名约定、OCSS命名约定等。
票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6028211

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档