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

我认为这篇文章解释得很全面。

CSS是一种用连字符分隔的语法。我的意思是我们写诸如字体大小，行高，边界底部等。

So:

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

代码自动完成

我想，破折号是解释为标点符号还是不透明的标识符取决于所选择的编辑器。然而，就个人喜好而言，我喜欢在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元素是一个bug，而不是一个特性。这是糟糕的JavaScript实现早期的一个糟糕的构造，并不是一个很好的实践。对于目前使用JavaScript所做的大多数事情，无论如何都希望使用CSS选择器从DOM中获取元素，这使得整个点表示法相当无用。你喜欢哪一种?

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

我发现前两个选项更可取，特别是因为“#first-name”可以用JavaScript变量替换并动态构建。我还发现它们更赏心悦目。

The fact that Sass enables arithmetic in its extensions to CSS doesn't really apply to CSS itself, but I do understand (and embrace) the fact that Sass follows the language style of CSS (except for the $ prefix of variables, which of course should have been @). If Sass documents are to look and feel like CSS documents, they need to follow the same style as CSS, which uses dash as a delimiter. In CSS3, arithmetic is limited to the calc function, which goes to show that in CSS itself, this isn't an issue.

跨语言变量命名不一致

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

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

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

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

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

The CSS1 specification, published in its final form in 1996, did not allow for the use of underscores in class and ID names unless they were "escaped." An escaped underscore would look something like this: p.urgent\_note {color: maroon;} This was not well supported by browsers at the time, however, and the practice has never caught on. CSS2, published in 1998, also forbade the use of underscores in class and ID names. However, errata to the specification published in early 2001 made underscores legal for the first time. This unfortunately complicated an already complex landscape.

我通常喜欢下划线，但反斜杠只会让它变得丑陋得无法想象，更不用说当时的稀缺支持了。我可以理解为什么开发者像躲避瘟疫一样躲避它。当然，我们现在不需要反斜杠，但是破折号的礼节已经牢固地建立起来了。

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

Underscores require hitting the Shift key, and are therefore harder to type. CSS selectors which are part of the official CSS specifications use dashes (such as pseudo-classes like :first-child and pseudo-elements :first-line), not underscores. Same thing for properties, e.g. text-decoration, background-color, etc. Programmers are creatures of habit. It makes sense that they would follow the standard's style if there's no good reason not to. This one is further out on the ledge, but... Whether it's myth or fact, there is a longstanding idea that Google treats words separated by underscores as a single word, and words separated by dashes as separate words. (Matt Cutts on Underscores vs. Dashes.) For this reason, I know that my preference now for creating page URLs is to use-words-with-dashes, and for me at least, this has bled into my naming conventions for other things, like CSS selectors.

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

我认为这与程序员有关。有人喜欢用破折号，有人喜欢用下划线。 我个人使用下划线(_)，因为我在其他地方也使用它。如: JavaScript变量(var my_name); -我的控制器动作(公共函数view_detail) 我使用下划线的另一个原因是，在大多数ide中，用下划线分隔的两个单词被认为是一个单词。(并且可以选择double_click)。