在过去，我总是使用下划线来定义HTML中的class和id属性。在过去的几年里，我改用破折号，主要是为了跟上社区的趋势，不一定是因为它对我有意义。
我一直认为破折号有更多的缺点，我没有看到它的好处:
代码完成&编辑
大多数编辑器将破折号视为单词分隔符，因此我无法通过制表符找到我想要的符号。假设类是"featured-product"，我必须自动完成"featured"，输入连字符，并完成"product"。
带下划线的"featured_product"被视为一个单词，因此可以一步填充。
这同样适用于在文档中导航。按单词跳转或双击类名将被连字符分隔。
(更一般地说，我认为类和id是标记，所以对我来说，标记应该如此容易地被连字符分割是没有意义的。)
与算术运算符
的歧义在JavaScript中使用破折号会破坏对表单元素的对象属性访问。这只能通过下划线来实现:
form.first_name.value='Stormageddon';
(不可否认，我自己不会以这种方式访问表单元素，但当决定将破折号和下划线作为通用规则时，考虑到有人可能会这样做。)
像Sass这样的语言(特别是在Compass框架中)已经将破折号作为标准，甚至对于变量名也是如此。他们最初也在开头使用下划线。事实是，这是不同的解析让我感到奇怪:$list-item-10
$list-item - 10
跨语言变量命名不一致
在过去，我曾经为PHP、ruby、HTML/CSS和JavaScript中的变量编写underscored_names。这样既方便又一致，但是为了"适应"，我现在使用:
-
dash-casein HTML/CSS -
camelCasein JavaScript -
underscore_case在PHP和ruby
这并没有太困扰我，但我想知道为什么这些变得如此不对齐，似乎是故意的。至少使用下划线可以保持一致性:
var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');
这些差异造成了我们必须翻译不必要的字符串的情况，以及潜在的bug。
所以我问:为什么社区几乎普遍采用破折号，是否有什么原因比下划线更重要?
在这个开始的时候有一个相关的问题，但我的观点是，这不是(或者不应该已经)只是一个品味问题。如果这真的只是一个品味问题，我想知道为什么我们都决定采用这个惯例。
代码补全
破折号是被解释为标点符号还是不透明的标识符取决于所选择的编辑器。然而，作为个人偏好，我更喜欢在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变量替换并动态构建。我也觉得它们更赏心悦目。
Sass在其CSS扩展中启用算术的事实并不真正适用于CSS本身，但我确实理解(并接受)Sass遵循CSS语言风格的事实(除了变量的$前缀，当然应该是@)。如果Sass文档看起来像CSS文档，那么它们需要遵循与CSS相同的样式，即使用破折号作为分隔符。在CSS3中，算法仅限于calc函数，这表明在CSS本身中，这不是问题。
跨语言变量命名不一致
所有的语言，无论是标记语言、编程语言、样式语言还是脚本语言，都有自己的风格。您可以在语言组(如XML)的子语言中发现这一点，例如XSLT使用带连字符分隔符的小写字母，而XML Schema使用驼峰式大小写。
一般来说，你会发现采用感觉和看起来最"原生"的语言风格比试图将自己的风格硬塞进每种不同的语言要好。因为你无法避免使用本地库和语言结构，所以无论你喜欢与否，你的风格都会被本地风格"污染"，所以甚至尝试都是徒劳的。
我的建议是，不要在各种语言中寻找自己喜欢的风格，而是让自己在每种语言中都感到自在，并学会喜欢它的所有怪癖。CSS的一个怪癖是关键字和标识符用小写字母书写，并用连字符分隔。就我个人而言，我发现这在视觉上非常吸引人，并且认为它适合全小写(尽管没有连字符)的HTML。
也许HTML/CSS社区使用横线而不是下划线的一个关键原因是由于规范和浏览器实现的历史缺陷。
摘自Mozilla 2001年3月发布的文档@ 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年初发布的规范使得下划线在已经不是第一次了。不幸的是，这使本已复杂的事情变得更加复杂景观。
我通常喜欢下划线，但是反斜杠让它变得难看得让人无法想象，更不用说当时缺乏支持。我可以理解为什么开发者像躲避瘟疫一样躲避它。当然，我们现在不需要反斜杠了，但是破折号的礼仪已经根深蒂固了。
我认为没有人能明确地回答这个问题，但以下是我的一些有根据的猜测:
-
下划线需要按Shift键，因此更难输入。
-
CSS选择器是官方CSS规范的一部分，使用破折号(如:first-child和pseudo-elements:first-line等伪类)，而不是下划线。属性也是一样，例如文本装饰，背景颜色等。程序员是习惯的生物。如果没有很好的理由，他们会遵循标准的风格，这是有道理的。
-
这是在更远的边缘，但是…不管这是神话还是事实，有一个长期存在的想法，即谷歌将以下划线分隔的单词视为单个单词，以破折号分隔的单词视为单独的单词。(马特·卡茨谈"下划线vs破折号"。)由于这个原因，我知道我现在创建页面url的首选是使用-words + -dash，至少对我来说，这已经渗透到我对其他东西的命名约定中，比如CSS选择器。
原因有很多，但其中最重要的是保持一致性
我认为这篇文章解释得很全面。
CSS是一种用连字符分隔的语法。我的意思是我们写
font-size,line-height,border-bottom等。
:
你不应该混合语法:这是不一致的。
近年来，以连字符分隔的url的整词片段明显增加。这是SEO最佳实践所鼓励的。Google明确"建议您在url中使用连字符(-)而不是下划线(_)":http://www.google.com/support/webmasters/bin/answer.py?answer=76329。
如前所述，不同的约定在不同的时间、不同的上下文中流行，但它们通常不是任何协议或框架的正式组成部分。
我的假设是，Google的位置将这种模式固定在一个关键上下文(SEO)中，而在类、id和属性名称中使用这种模式的趋势只是朝着这个总体方向缓慢移动的群体。
我认为这是程序员的事情。有些人喜欢用破折号，有些人喜欢用下划线。
我个人使用下划线(_)，因为我在其他地方也使用它。如:
- JavaScript变量(var my_name);
-我的控制器动作(public function view_detail)
我使用下划线的另一个原因是，在大多数ide中，用下划线分隔的两个单词被认为是一个单词。(并且可以使用double_click进行选择)。
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
bbtnb(?!-) type to hard
result btn