为啥 CSS 选择器/HTML 属性首选破折号？

Posted 2023-02-15

【中文标题】为啥 CSS 选择器/HTML 属性首选破折号？

【英文标题】：Why are dashes preferred for CSS selectors / HTML attributes?为什么 CSS 选择器/HTML 属性首选破折号？

【发布时间】：2011-11-25 12:35:54

【问题描述】：

过去我总是使用下划线来定义 html 中的 class 和 id 属性。在过去的几年里，我改用破折号，主要是为了让自己与trend in the community 保持一致，不一定是因为它对我有意义。

我一直认为破折号有更多的缺点，而我看不到它的好处：

代码完成和编辑

大多数编辑器将破折号视为单词分隔符，因此我无法通过 Tab 切换到我想要的符号。假设班级是“featured-product”，我必须自动完成“featured”，输入连字符，然后完成“product”。

带下划线的“featured_product”被视为一个单词，因此可以一步完成。

这同样适用于浏览文档。按单词跳转或双击类名会被连字符分隔。

（更一般地说，我将类和 id 视为 tokens，因此对我来说，token 应该如此容易地在连字符上拆分是没有意义的。）

算术运算符的歧义

在 javascript 中使用破折号会破坏对象属性 access to form elements。这只能使用下划线：

form.first_name.value='Stormageddon';

（诚然，我自己并不以这种方式访问​​表单元素，但在决定将破折号与下划线作为通用规则时，请考虑到有人可能会这样做。）

像Sass 这样的语言（尤其是在整个Compass 框架中）已经将破折号作为标准，即使对于变量名也是如此。他们最初也使用下划线。解析方式不同的事实让我觉得很奇怪：

$list-item-10
$list-item - 10

跨语言变量命名不一致

过去，我曾经为 php、ruby、HTML/CSS 和 JavaScript 中的变量编写 underscored_names。这是方便且一致的，但为了“适应”我现在使用：

dash-case 在 HTML/CSS 中 camelCase 在 JavaScript 中 underscore_case 在 PHP 和 ruby​​ 中

这并没有真正困扰我太多，但我想知道为什么这些变得如此错位，似乎是故意的。至少使用下划线可以保持一致性：

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

这些差异造成了我们必须translate strings不必要的情况，以及潜在的错误。

所以我问：为什么社区几乎普遍选择破折号，有什么理由比下划线更重要吗？

在这开始的时候有一个related question，但我认为这不是（或不应该）只是品味问题。如果真的只是口味问题，我想了解为什么我们都选择了这个约定。

【问题讨论】：

我使用破折号，因为我不必按 shift 键。

很好奇为什么关闭它...是否有投票关闭它？我不是在这个问题上征求意见。我给出了反对使用破折号的具体理由，但如果每个人似乎都同意这一趋势，那么它们肯定有充分的理由。这里有一些很好的答案和很好的信息。我可以改进这个问题吗？

我提名我的问题重新开放：以下所有答案都包括“事实、参考资料或特定专业知识”......所以我看不出它是如何“没有建设性”的。跨度>

我认为以非建设性的方式关闭此线程是一个愚蠢的决定。如果由于偏好以外的原因（IDE 更容易处理、代码完成更容易、与工具更好地集成）而存在一种更受欢迎的编码风格，我认为这将是一个非常有建设性的问题/答案/讨论。

@AndrewVit：这是一个非常好的问题，格式正确，内容丰富，并突出了多个方面。为此+1。顺便说一句，我同意以 “不具建设性” 来结束这个话题是毫无意义的。实际上这是建设性的。

【参考方案1】：

代码完成

我猜，破折号被解释为标点符号还是不透明的标识符取决于选择的编辑器。但是，作为个人喜好，我更喜欢在 CSS 文件中的每个单词之间使用制表符，如果它们用下划线分隔并且没有停止，会觉得很烦人。

此外，使用连字符可以利用|= attribute selector，它选择包含文本的任何元素，可以选择后跟破折号：

span[class|="em"]  font-style: italic; 

这将使以下 HTML 元素具有斜体字体样式：

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

算术运算符的歧义

我会说在 JavaScript 中通过点符号访问 HTML 元素是一个错误，而不是一个特性。从糟糕的 JavaScript 实现的早期开始，这是一个糟糕的构造，并不是一个很好的实践。对于你现在用 JavaScript 做的大部分事情，无论如何你都想使用CSS Selectors 从 DOM 中获取元素，这使得整个点表示法毫无用处。你更喜欢哪一个？

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

我发现前两个选项更可取，特别是因为'#first-name' 可以替换为 JavaScript 变量并动态构建。我还发现它们在眼睛上更令人愉悦。

Sass 在其对 CSS 的扩展中启用算术这一事实并不真正适用于 CSS 本身，但我确实理解（并接受）Sass 遵循 CSS 的语言风格的事实（除了 $ 前缀变量，当然应该是@）。如果 Sass 文档的外观和感觉都像 CSS 文档，它们需要遵循与 CSS 相同的样式，后者使用破折号作为分隔符。在 CSS3 中，算术仅限于 calc 函数，这表明在 CSS 本身中，这不是问题。

跨语言变量命名不一致

所有语言，无论是标记语言、编程语言、样式语言还是脚本语言，都有自己的风格。您会在 XML 等语言组的子语言中找到这一点，例如XSLT 使用带连字符分隔符的小写字母，XML Schema 使用驼峰式。

一般而言，您会发现采用与您所写语言最“原生”的风格比尝试将自己的风格硬塞进每一种不同的语言要好。由于您不可避免地不得不使用原生库和语言结构，因此无论您喜欢与否，您的样式都会被原生样式“污染”，因此即使尝试也是徒劳的。

我的建议是不要在各种语言中找到最喜欢的风格，而是让自己在每种语言中都很自在，并学会爱上它的所有怪癖。 CSS 的怪癖之一是关键字和标识符用小写字母书写并用连字符分隔。就个人而言，我觉得这在视觉上非常吸引人，并认为它适合全小写（尽管没有连字符）HTML。

【讨论】：

“破折号被解释为标点符号还是不透明的标识符取决于选择的编辑器”我认为这通常不是真的，尽管可能有一些特殊的编辑器。双击一个带连字符的单词只会选择它的一部分，而不是整个标记：这似乎是操作系统范围的。

关于|= 选择器的好点，我在另一个答案中看到了这一点，这是一个公平的观点。语言约定是围绕这个设计的，还是相反？ （连字符作为一种普遍趋势似乎是最近才出现的，它们可能是在同一时间出现的。）

@AndrewVit，有些基于 CLI 的编辑器与双击无关（因为通常没有鼠标），并且可以配置为具有这种行为。但总的来说，你是对的。 |= 属性选择器是专门为lang 属性制作的，但它的用途可以扩展。我一直在我的 CSS 中使用连字符，所以我不能代表公众发言，但是从帕斯卡大小写、骆驼大小写和下划线来看，连字符肯定已经趋于一致。不过，据我所知，|= 选择器和连字符作为分隔符是不相关的。

我不认为点符号是一个错误，它是不应该使用连字符的 CSS。另外，赏心悦目的是多变的。

@KamilKiełczewski 这很有用，但工作方式略有不同。

【参考方案2】：

也许 HTML/CSS 社区使用破折号而不是下划线的一个关键原因是由于规范和浏览器实现的历史缺陷。

来自 2001 年 3 月发布的 Mozilla 文档 @https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

在 1996 年以最终形式发布的 CSS1 规范没有 允许在类和 ID 名称中使用下划线，除非它们 被“逃脱”了。转义的下划线看起来像这样：

    p.urgent\_note color: maroon;

然而，当时的浏览器并没有很好地支持这一点，而且 实践从未流行起来。 1998 年发布的 CSS2 也禁止 在类和 ID 名称中使用下划线。然而，勘误表 2001 年初发布的规范强调了对 第一次。不幸的是，这使已经很复杂的事情复杂化了 风景。

我通常喜欢下划线，但反斜杠只会让它变得丑陋不堪，更不用说当时稀缺的支持了。我可以理解为什么开发人员会像避免瘟疫一样避免它。当然，现在我们不需要反斜杠了，但是破折号的礼仪已经根深蒂固了。

【讨论】：

谢谢！我喜欢找出像这样的约定的“词源”。它帮助我记住使用约定，因为我可以将语言与它相关联。有了这种关联，我的潜意识就会开始使用这种约定。

【参考方案3】：

我认为没有人能明确回答这个问题，但以下是我有根据的猜测：

下划线需要按 Shift 键，因此更难键入。

作为官方 CSS 规范一部分的 CSS 选择器使用破折号（例如伪类，如 :first-child 和伪元素 :first-line），而不是下划线。属性也一样，例如文本装饰，背景颜色等。程序员是习惯的动物。如果没有充分的理由，他们会遵循标准的风格是有道理的。

这个问题更进一步，但是......无论是神话还是事实，有一个长期存在的想法是 Google 将由下划线分隔的单词视为单个单词，将由破折号分隔的单词视为单独的单词. (Matt Cutts on Underscores vs. Dashes.) 出于这个原因，我知道我现在创建页面 URL 的偏好是使用带破折号的单词，至少对我来说，这已经融入了我对其他事物的命名约定，比如 CSS 选择器。

【讨论】：

关于 SEO 关于 URL 中的破折号和语义标记的好点（不管这是否真的）...你能澄清一下哪些“CSS 选择器是官方 CSS 规范的一部分使用破折号？

我在回答中的第 2 点进行了扩展，举了几个例子，尽管我更多地考虑 CSS 属性，如文本装饰而不是“选择器”，所以这有点错字，虽然有是一些选择器，如上所述。

感谢@albert，这本身就是一个很好的答案……至少对于历史背景而言。我不知道原始规范不允许下划线！ （但为什么他们应该被禁止是没有意义的。）

第 2 点说服了我，尤其是考虑到背景颜色、文本装饰等属性。

仅供参考，上面@albert 的评论 (devedge-temp.mozilla.org/viewsource/2001/css-underscores) 中引用的 devedge-temp 网址现在位于 developer.mozilla.org/en-US/docs/…

【参考方案4】：

原因有很多，但最重要的事情之一是保持一致性。

我觉得this的文章解释的很全面。

CSS 是一种连字符分隔的语法。我的意思是我们写font-size、line-height、border-bottom等。

所以：

你只是不应该混合语法：这是不一致的。

【参考方案5】：

近年来，以连字符分隔的全词 URL 片段明显增加。这是由 SEO 最佳实践所鼓励的。 Google 明确“建议您在 URL 中使用连字符 (-) 而不是下划线 (_)”：http://www.google.com/support/webmasters/bin/answer.py?answer=76329。

如前所述，不同的约定在不同的时间在不同的环境中盛行，但它们通常不是任何协议或框架的正式部分。

然后，我的假设是，Google 的位置将这种模式锚定在一个关键上下文 (SEO) 中，并且在类、id 和属性名称中使用这种模式的趋势只是群体在这个大方向上缓慢移动。

【参考方案6】：

我认为这是依赖于程序员的事情。有些人喜欢使用破折号，有些人喜欢使用下划线。 我个人使用下划线（_），因为我也在其他地方使用它。如： - JavaScript 变量 (var my_name); - 我的控制器操作 (public function view_detail) 我使用下划线的另一个原因是，在大多数 IDE 中，由下划线分隔的两个单词被视为 1 个单词。 （并且可以使用 double_click 进行选择）。

【参考方案7】：

point of refactoring only btn to bt

case: btn_pink
search btn in word
result btn

case: btn-pink
search btn in word
result btn | btn-pink

case: btn-pink
search btn in regexp
\bbtn\b(?!-) type to hard
result btn

【讨论】：

请在您的代码中添加一些 cmets 以帮助用户理解您的答案。我建议您也阅读一些指南，这将有助于让您的答案更清晰，而不是被删除并获得更多选票。 ***.com/help/how-to-answer