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

过去我总是使用下划线来定义class and idHTML 中的属性。在过去的几年里，我改用破折号，主要是为了使自己与社区趋势，不一定是因为它对我有意义。

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

代码完成和编辑

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

带下划线“featured_product" 被视为一个单词，因此可以一步填写。

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

（更一般地说，我认为类和 id 是tokens，所以对我来说，令牌应该如此容易地在连字符上分割是没有意义的。）

算术运算符的歧义

使用破折号会破坏对象属性访问表单元素在 JavaScript 中。这只能使用下划线：

form.first_name.value='Stormageddon';

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

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

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

跨语言变量命名不一致

以前，我曾经写过underscored_names用于 PHP、Ruby、HTML/CSS 和 JavaScript 中的变量。这很方便且一致，但为了“适应”我现在使用：

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

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

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

这些差异造成了我们必须翻译字符串不必要的，以及潜在的错误。

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

有一个相关问题从这开始的时候开始，但我认为它不是（或者不应该已经）只是一个品味问题。我想理解为什么我们都决定采用这个约定，如果这真的只是一个品味问题。

代码完成

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

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

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 选择器无论如何，从 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模式使用骆驼肠衣。

一般来说，您会发现采用感觉和看起来最适合您所使用的语言的风格比尝试将自己的风格硬塞到每种不同的语言中要好。由于您无法避免使用本机库和语言构造，因此无论您是否喜欢，您的风格都会被本机风格“污染”，因此尝试几乎是徒劳的。

我的建议是不要跨语言寻找最喜欢的风格，而是让自己熟悉每种语言并学会喜欢它的所有怪癖。 CSS 的怪癖之一是关键字和标识符以小写形式书写并用连字符分隔。就我个人而言，我发现这在视觉上非常吸引人，并且认为它适合全小写（尽管没有连字符）HTML.