【问题标题】：What is the standard naming convention for html/css ids and classes? [closed]html/css id 和类的标准命名约定是什么？ [关闭]
【发布时间】：2011-08-27 01:24:44
【问题描述】：

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

有几种选择：

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

我认为上面的 #1 和 #3 最有意义，因为它们与 Javascript 配合得更好。

这个问题有正确答案吗？

【问题讨论】：

相关stackoverflow.com/a/23658906/759452
我找到了这个...HTML Naming Conventions
显然方括号不应用作 id 的一部分。如果引导程序包含任何方括号，则至少引导程序不会将其与数据目标匹配。而且它不能以数字开头，因为它不是有效的变量名。
方括号绝对不应该用作 id 的一部分！ the-tag.the-class#the-id[disabled][src=exactUrl][href*=partialUrl] 是一个有效的 CSS 选择器。如果 id 是 id="the-id[disabled]"，您将无法判断您选择的元素是 id="the-id[disabled]" 还是 id="the-id" 和 disabled=true。同样，您不能在 id 中使用点或井号。
重新打开：[standards] 标签说，“标准已正式发布或格式一致......”和[naming-conventions] 说，“这些约定有助于可读性，从而通过强制命名一致性来提高代码的可维护性......”这些很好地涵盖了这个问题（尽管不是所有的答案；有些是 100% 的意见！）。只是 b/c 它是主观的并不意味着它不应该在 SO 中。 Tim's response，例如，100% 客观地开始：“因为 CSS 不区分大小写，所以最好用小写（或大写）写所有名称”

标签： html css naming-conventions standards

【解决方案1】：

没有。

我一直使用下划线，因为连字符会弄乱我的文本编辑器 (Gedit) 的语法高亮显示，但这是个人喜好。

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

2012 年更新

随着时间的推移，我改变了我的编程方式。我现在使用驼峰式 (thisIsASelector) 而不是连字符；我觉得后者相当丑陋。使用任何你喜欢的，随着时间的推移很容易改变。

2013 年更新

看起来我喜欢每年都把事情搞混...在切换到 Sublime Text 并使用 Bootstrap 一段时间后，我又回到了破折号。现在对我来说，它们看起来比 un_der_scores 或 camelCase 干净得多。 我原来的观点仍然存在：没有标准。

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

【讨论】：

我认为随着您的应用程序变得越来越大，您的 id 开始变得又长又复杂，那么在那一刻破折号看起来不太好。我也在使用 Sublime 和 Twitter Bootstrap，并且我同意在 Bootstrap 之类的类中使用破折号。但是 ids 更适合 JavaScript，所以我更喜欢在这种情况下使用 camelCase。
我见过的一个准标准（Bootstrap 似乎做了一些）是将“js-”添加到任何专门用于 Javascript 的 CSS 类或 id。也许这会在 2016 年晋级 :)
@DolanAntenucci 这似乎是一个非常明智的想法，虽然我已经开始使用BEM，它采用了类似但更通用的方法（使用它的修饰符）
@Bojangles -- BEM 看起来很有趣，尽管出于不同目的使用破折号和下划线需要一些时间来适应；同样，双破折号/下划线也可以:) 感谢分享
我相信人们更喜欢 CSS id 中的破折号的一个原因是，类是为了功能。使用 option + 左/右箭头 在每个破折号处逐字遍历您的代码，让您可以使用键盘快捷键轻松遍历 id 或类名。下划线和驼峰式不被拾取，光标将在它们上方移动，就好像它们都是一个单词一样。

【解决方案2】：

tl;博士; 2022

现在看来“-”将成为行业标准。

# 已弃用

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

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

Dash-style 是一种 google 代码风格，但我不太喜欢它。我更喜欢用 TitleCase 作为 id 和 camelCase 作为类。

【讨论】：

解决方法是var x = document.myForm['my-Id'].value;
我不会使用任何这些方法，而是getElementById('whatever-you-want_my_friend')。这取决于。如果您的代码具有渲染 HTML 的后端（服务器端）编码，则使用 camelCase 来匹配您的命名约定，或使用蛇形大小写，无论您使用什么编码语言，都可能是最好的，以便通过您的前端和后端代码进行搜索是一致的。

【解决方案3】：

tl;dr;

没有一个真正的答案。您可以从众多标准中选择一个，或者根据与谁一起工作来创建自己的标准。并且 100% 依赖于平台。

原帖

只需考虑另一种标准：

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

在你的脚本中：

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

这只是对变量、id 和类分别使用驼峰式、under_score 和连字符。我已经在几个不同的网站上阅读过这个标准。尽管在 css/jquery 选择器中有点冗余，但冗余使捕获错误更容易。例如：如果你在 CSS 文件中看到 .unknown_name 或 #unknownName，你就知道你需要弄清楚它实际指的是什么。

2019 年更新

（连字符称为'kebab-case'，下划线称为'snake_case'，然后你有'Title Case'、'PascalCase'和'camelCase'）

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

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

我办公室的编码小组实际上在一两个月前召开了一次会议，讨论我们将如何命名事物。对于 git 分支，我们无法在 321-the_issue_description 或 321_the-issue-description 之间做出决定。（我想要 321_theIssueDescription，但我的同事不喜欢。）

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

Vue.js 确实有一个标准。实际上，他们的几个项目有两个替代标准。我不喜欢他们两个版本的文件名。他们推荐"/path/kebab-case.vue" 或"/path/PascalCase.Vue"。前者更难重命名，除非你特别想重命名它的一部分。后者不利于跨平台兼容。我更喜欢"/path/snake_case.vue"。但是，在与其他人或现有项目合作时，遵循已经制定的任何标准都很重要。因此，我在 Vue 中使用 kebab-case 作为文件名，尽管我会完全抱怨它。因为不遵循这意味着要更改 vue-cli 设置的大量文件。

2021 年更新

在我生命中的这一点上，我尝试专门使用kebab-case 作为项目文件名。

还有一个奇怪的snake_case.kebab-case.dot.case.Title.Case 组合，用于人类交流的文件。对于五四下午 1:02 生成的报告，像包含报告的 excel 文件可能是 "Report_Name-Report_Type-2021.05.04_13.02"。我实际上打算在所述报告名称中使用Title Case，但是如果您重新保存文件，您将没有空格。我打算使用 kebab-case 并使 datestamp 符合 ISO 标准，但客户感到困惑，因为他们使用美国月-日-年格式作为日期。另一个例子是"SomeRequestForm-ProjectName-01.pdf"。

客户端可读的东西很难解决。

我尽可能避免使用空格（并且客户不会要求它们），因为它们不是 cli 安全的。我已经采用 Angular 方法来处理项目中的文件名。 some-thing.type.ts，其中描述为kebab-case，文件中存储的对象的标准类型以扩展名之类的点分隔。我通常不做some-area_some-thing.type.ts，除非该文件是独立且可移植的。如果它在一个项目中，那么我只使用像some-area/some-thing.type.ts这样的文件夹

此外，我将 kebab-case 用于 css 类，有时将 snakeAndCamel_case 混合用于 html id，但通常我不再使用 html id，因为我使用可重用组件，这会中断。当我确实使用 id 时，它通常类似于someComponent-someElement_49bea6c9-551b-400a-a3e0-59ed40967646，其中 uuid 是每个组件实例自行分配的生成 uuid。这在 Angular 中不受支持，因此我倾向于提出其他解决方法，例如将整个表单输入保留在标签内。

此外，对于变量名，我仍然主要使用驼峰式，除了类名，有时还有函数名。使用外部软件包时，我只是做他们正在做的事情。对于模仿环境变量的东西，我确实使用ALL_CAPS_SNAKE_CASE，这包括node.js process.env.SOME_ENV_VAR 和combinedConfiguration.SOME_ENV_VAR（当我使用参数配置覆盖process.env 时）

我的 tl;dr;几年后仍然适用。没有一个真正的答案。但尽量为每个项目保留一种风格。并尽可能减少符号中的单词数。

【讨论】：

对于 SEO（读作：Google 做事的方式），URL 路径名应该是 kebab-case。 Google 不会解析带有下划线的分隔词。

【解决方案4】：

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

所有权

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

新车右转

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

汽车 - 一个名词和一个对象
new - 形容词和更详细地描述对象的对象描述符
turned - 一个动词，一个属于宾语的动作
right - 一个形容词和一个更详细地描述动作的动作描述符

注意：动词（动作）应为过去时（turned、did、ran 等）。

关系

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

汽车新转右轮左转左

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

车轮左转左（遵循所有权规则）

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

最后说明：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

以免其他人感到困惑：对于 Windows，它是 CTRL + LEFT / RIGHT
这实际上是我尽可能使用下划线或驼峰式而不是破折号的最大原因。 the-red-box 无法通过简单的双击或两次按键来选择。还有 cmd/ctrl + D 用于 vsCode。相反，您必须多次或用鼠标拖动选择。但是the_red_box 支持所有三个易于选择的快捷方式。
如果 the_red_box 在 URL 中，Google 会将其视为一个单词。如果它在 URL 中，它将把 the-red-box 作为三个单词处理。请使用 kebab-case，至少对于 URL 命名方案。您的客户会感谢您的。
好点！但我并不是指使用下划线的 url 或文件路径。

【解决方案6】：

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

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

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

【讨论】：

“最佳命名实践”的链接只是说没有约定，只是保持一致。 BTW w3schools 与 W3C 无关。

【解决方案7】：

我认为它依赖于平台。在 .Net MVC 中开发时，我使用引导风格的小写字母和连字符作为类名，但对于 id，我使用 PascalCase。

这样做的原因是我的视图是由强类型视图模型支持的。 C# 模型的属性是帕斯卡大小写。为了模型与 MVC 的绑定，绑定到模型的 HTML 元素的名称与视图模型属性一致是有意义的，这是帕斯卡大小写。为简单起见，我的 id 使用与元素名称相同的命名约定，但单选按钮和复选框要求命名输入组中的每个元素都有唯一的 id。

【讨论】：