为什么破折号首选CSS选择器/ HTML属性？
在过去，我一直使用下划线来定义HTML中的类和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-case camelCase在JavaScript中 underscore_case 这并没有让我感到太困扰，但我想知道为什么这些变得如此错位，似乎是故意的。 至少在下划线时可以保持一致性：
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 Schema使用骆驼套装。
总的来说，你会发现采用那种对你所写的语言感觉和看起来最“原生”的风格，比试图用自己的风格来表达每一种不同的语言更好。 既然你无法避免使用本地库和语言结构，无论你喜不喜欢，你的风格都会受到本地风格的“污染”，所以即使尝试也是徒劳无功。
我的建议是，不要在各种语言中找到最喜欢的风格，而应该让自己在每种语言中都有自己的家，并学会爱好它的所有怪癖。 CSS的怪癖之一是关键字和标识符是用小写字母写的，并用连字符分隔。 就我个人而言，我觉得这非常吸引人，并认为它适合全小写（尽管没有连字符）的HTML。
也许是为什么HTML / CSS社区将自身与破折号而不是下划线对齐的关键原因是由于规范和浏览器实现方面的历史缺陷。
来自2001年3月发布的Mozilla文档@ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names
CSS1规范以1996年的最终形式发布，除非它们被“转义”，否则不允许在类和ID名称中使用下划线。 逃脱的下划线看起来像这样：
p.urgent_note {color: maroon;}
然而，当时浏览器并没有很好地支持这种做法，并且这种做法从未出现过。 1998年发布的CSS2也禁止在类和ID名称中使用下划线。 然而，对2001年初发布的规范的勘误第一次强调了合法性。 这不幸地使复杂的景观复杂化。
我通常喜欢下划线，但是反斜线只会让它变得丑陋超越希望，更不用说当时的稀缺支持。 我可以理解为什么开发人员避免它像瘟疫一样。 当然，我们现在不需要反斜杠，但破折号礼仪已经牢固确立。
我不认为任何人都可以明确地回答这个问题，但这里是我的教育猜测：
下划线需要按下Shift键，因此难以输入。
作为官方CSS规范一部分的CSS选择器使用破折号（例如伪类，如：first-child和伪元素：第一行），而不是下划线。 属性也是如此，例如文本修饰，背景颜色等。程序员是习惯的生物。 如果没有好的理由，他们会遵循标准的风格是有道理的。
这是一个在窗台上更远的地方，但是......无论是神话还是事实，Google长期以来都认为用下划线将单词分隔为单个单词，并用短划线将单词分隔为单独的单词。 （Matt Cutts在下划线和短划线上。）因此，我知道现在我对创建页面URL的首选是使用单词 - 破折号，至少对我来说，这已经为我的其他命名规则，就像CSS选择器一样。
上一篇: Why are dashes preferred for CSS selectors / HTML attributes?