为什么破折号首选CSSselect器/ HTML属性？
在过去，我一直使用下划线来定义HTML中的类和id属性。 在过去的几年中，我改变了破折号，主要是为了与社会潮stream保持一致，不一定是因为这对我有意义。
我一直认为破折号有更多的缺点，我没有看到好处：
代码完成和编辑
大多数编辑器将短划线作为单词分隔符，所以我无法选中所需的符号。 说class级是“ featured-product ”，我必须自动完成“ featured ”，input连字符，并完成“ product ”。
下划线“ featured_product ”被视为一个单词，因此可以一步填充。
导航整个文档也是如此。 跳字或双击class名被连字符打破。
（更一般地说，我把class和id当作token ，所以对于我来说一个token在连字符上应该很容易被分割是没有意义的。）
含算术运算符的歧义
使用破折号破坏对象属性访问以在JavaScript中形成元素 。 这只可能与下划线：
form.first_name.value='Stormageddon';
（不可否认，我自己并不是以这种方式访问表单元素，但是当把破折号与下划线作为一个普遍规则来决定时，可以考虑有人可能）。
像Sass这样的语言（特别是在整个Compass框架中）已经以破折号作为标准，甚至是variables名称。 他们原来也是在开始时使用了下划线。 事实上，这是不同的parsing让我感到奇怪：
$list-item-10 $list-item - 10
不同语言的variables命名不一致
回到当天，我曾经为PHP，Ruby，HTML / CSS和JavaScript中的variables编写underscored_names 。 这是方便和一致的，但为了“适应”我现在使用：
-
dash-case在HTML / CSS中 - 在JavaScript中使用
camelCase - 在PHP和ruby
underscore_case
这并不是真的让我感到困扰，但我想知道为什么这些变得如此失调，似乎是故意的。 至less有下划线是可以保持一致的：
var featured_product = $('#featured_product'); // instead of var featuredProduct = $('#featured-product');
这些差异造成了我们必须不必要地翻译string的情况 ，以及错误的可能性。
所以我问：为什么社会几乎普遍摆在破折号，有什么理由超过下划线？
从开始的时候开始就有一个相关的问题 ，但是我认为这不是（或者不应该是）味道的问题。 我想了解，为什么我们大家都决定这个惯例，如果它真的只是一个味道问题。
代码完成
不pipe破折号是标点符号还是不透明标识符，都取决于select的编辑器。 但是，作为个人偏好，我喜欢能够在CSS文件中的每个单词之间进行select，并且如果它们之间用下划线分隔并且没有停止，会觉得很烦人。
此外，使用连字符允许您利用| =属性select器 ，该select器可以select包含文本的任何元素（可选地后跟一个短划线）：
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元素是一个错误，而不是一个function。 从糟糕的JavaScript实现的早期阶段来看，这是一个糟糕的结构，并不是一个很好的实践。 对于你现在使用JavaScript进行的大部分工作，你会希望使用CSSselect器从DOM中获取元素，这使得整个点符号变得毫无用处。 你更喜欢哪一个？
var firstName = $('#first-name'); var firstName = document.querySelector('#first-name'); var firstName = document.forms[0].first_name;
我发现两个第一个选项更可取，特别是因为'#first-name'可以用JavaScriptvariables替代并dynamic构build。 我也发现他们在眼睛上更愉快。
Sass在其CSS扩展中使用算术的事实并不适用于CSS本身，但我确实理解（并且支持）Sass遵循CSS的语言风格这一事实（除了variables的$前缀，当然应该是@ ）。 如果Sass文档看起来像CSS文档，他们需要遵循与使用短划线作为分隔符的CSS相同的样式。 在CSS3中，算术仅限于calc函数，这表明在CSS本身中，这不是问题。
不同语言的variables命名不一致
所有语言，标记语言，编程语言，样式语言或脚本语言都有自己的风格。 您可以在XML之类的语言组的子语言中find它，例如， XSLT使用连字符分隔符使用小写字母， XML模式使用骆驼套装。
总的来说，你会发现采用那种对你所写的语言感觉和看起来最“本土化”的风格要比试图用自己的风格来expression每一种不同的语言更好。 既然你不能避免使用本地库和语言结构，你的风格将会被本地风格所“污染”，不pipe你喜不喜欢，所以即使尝试也是徒劳无益的。
我的build议是，不要在各种语言中find最喜欢的风格，而应该让自己在每种语言的语言中学习，并学会爱好它的所有怪癖。 CSS的怪癖之一是关键字和标识符是用小写字母写的，并用连字符分隔。 就个人而言，我觉得这非常有吸引力，并认为它适合全小写（尽pipe没有连字符）的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键，因此难以input。
-
作为官方CSS规范一部分的CSSselect器使用破折号（例如伪类，如：first-child和伪元素：first-line），而不是下划线。 属性也是如此，例如文本修饰，背景颜色等。程序员是习惯的生物。 如果没有好的理由，他们会遵循标准的风格是有道理的。
-
这是一个突破，但是…无论是神话还是事实，有一个长期的观点，Google把用下划线分隔的单词当作一个单词，用短划线分隔单词作为单独的单词。 （Matt Cutts在下划线和短划线上。）因为这个原因，我知道现在我对创build页面URL的select是使用单词和破折号，至less对我来说，这已经为我的其他命名规则，就像CSSselect器一样。
近些年来，URL在连字符分隔的整个词段中有了明显的提高。 这是由search引擎优化最佳做法鼓励。 Google明确build议您在url中使用连字符（ – ）而不是下划线（_）： http : //www.google.com/support/webmasters/bin/answer.py?answer=76329 。
如上所述，不同的惯例在不同的情况下在不同的时间盛行，但是它们通常不是任何协议或框架的正式部分。
因此，我的假设是，Google的位置将这种模式固定在一个关键的上下文（SEO）中，在类，id和属性名称中使用这种模式的趋势就是在这个总体方向上缓慢移动的群体。
我认为这是一个程序员依赖的事情。 有些人喜欢用破折号，有些则用下划线。
我个人使用下划线（ _ ），因为我也在其他地方使用它。 如：
– JavaScriptvariables（ var my_name ）;
– 我的控制器动作（ public function view_detail ）
我使用下划线的另一个原因是，在大多数IDE中，由下划线分隔的两个单词被认为是1个单词。 （可以用double_click来select）。
原因有很多，但最重要的是保持一致性 。
我认为这篇文章全面解释。
CSS是一个连字符分隔的语法。 我的意思是我们写的东西，如
font-size，line-height，border-bottom等
所以：
你不应该混合语法： 它是不一致的 。
