为什么在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

与跨语言的变量命名不一致

以前，我曾经用underscored_namesPHP，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 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年初发布的规范勘误表首次强调了合法性。不幸的是，这使本来已经很复杂的景观变得复杂。

我通常喜欢下划线，但是反斜杠使丑陋变得令人望而却步，更不用说当时的稀缺支持了。我能理解为什么开发人员会像瘟疫一样避免这种情况。当然，如今我们不需要反斜杠，但破折号已被牢固确立。

我认为没有人可以确切地回答这个问题，但这是我的有根据的猜测：

1. 下划线要求按Shift键，因此较难键入。

2. 属于正式CSS规范的CSS选择器使用短划线（例如，伪类（如：first-child和伪元素：first-line））而不是下划线。属性（例如文本装饰，背景颜色等）的属性相同。程序员是习惯的生物。如果没有充分的理由，他们会遵循标准的样式是有道理的。

3. 这个问题在壁架上遥遥领先，但是...无论是神话还是事实，都有一个由来已久的想法，即Google将用下划线分隔的单词视为一个单词，而将用短划线分隔的单词视为单独的单词。 （马特·卡茨在下划线与破折号。）为此，我知道现在我的喜好创建网页网址是用字，用破折号，并至少对我来说，这已经耗尽了我的命名约定其他的事情，如CSS选择器。

原因有很多，但是最重要的事情之一就是保持一致性。

我想，这文章解释了它全面。

CSS是连字符分隔的语法。我的意思是，我们写的东西一样font-size，line-height，border-bottom等。

所以：

您只是不应该混用语法：不一致。

近年来，连字符分隔的URL的全字段明显增加了。SEO最佳做法鼓励了这一点。Google明确“建议您在网址中使用连字符（-）而不是下划线（_）”：http : //www.google.com/support/webmasters/bin/answer.py?answer=76329。

如前所述，不同的公约在不同的背景下在不同的时间盛行，但是它们通常不是任何协议或框架的正式部分。

因此，我的假设是，Google的职位将这种模式锚定在一个关键上下文（SEO）中，并且在类，id和属性名称中使用该模式的趋势只是群体朝这一总体方向缓慢发展。

我认为这是程序员依赖的东西。有人喜欢使用破折号，而其他人则使用下划线。
我个人使用下划线（_），因为我也在其他地方使用了下划线。如：
-JavaScript变量（var my_name）;
-我的控制器操作（public function view_detail）
我使用下划线的另一个原因是，在大多数IDE中，由下划线分隔的两个单词被视为1个单词。（并且可以通过double_click进行选择）。