为什么破折号首选CSS选择器/ HTML属性？

Question

在过去,我总是使用下划线来定义HTML中的class和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');

差异造成了我们不得不不必要地翻译字符串以及可能存在错误的情况.

所以我问:为什么社区几乎普遍以破折号为主,是否有任何理由超过下划线？

从这个开始的时间开始有一个相关的问题,但我认为它不是(或不应该)只是一个品味的问题.我想了解为什么我们都认为这个大会只是一个品味问题.

Answer 1

代码完成

我猜,破折号是否被解释为标点符号或不透明的标识符取决于所选择的编辑器.但是,作为个人偏好,我倾向于能够在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使用camel-casing.

一般来说,你会发现采用你所写的语言感觉和看起来最"本土"的风格比试图将自己的风格融入每种不同的语言更好.既然你不能避免使用本机库和语言结构,你的风格将被本机风格"污染",无论你喜欢与否,所以即使尝试它也是徒劳的.

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

Answer 2

也许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;}

然而,当时浏览器并没有很好地支持这种做法,而且这种做法从未流行过.CSS2于1998年出版,也禁止在类和ID名称中使用下划线.然而,2001年初发布的规范的勘误表首次强调了合法性.不幸的是,这复杂化了已经复杂的景观.

我通常喜欢下划线,但反斜杠只是让它变得难以置信,更不用说当时的稀缺支持了.我可以理解为什么开发人员像瘟疫一样避开它.当然,我们现在不需要反斜杠,但礼仪礼仪已经牢固确立.

Answer 3

我不认为任何人都可以肯定地回答这个问题,但这是我的有根据的猜测:

1. 下划线需要按Shift键,因此难以键入.

2. 作为官方CSS规范的一部分的CSS选择器使用破折号(例如伪类,如:first-child和pseudo-elements:first-line),而不是下划线.属性相同,例如文本装饰,背景颜色等.程序员是习惯的生物.如果没有充分的理由,他们会遵循标准的风格是有道理的.

3. 这个问题更进一步,但是......无论是神话还是事实,Google都有一个长期的想法,即谷歌将由下划线分隔的单词视为一个单词,而将单词用短划线分隔为单独的单词.(Matt Cutts on Underscores vs. Dashes.)出于这个原因,我知道我现在对创建页面URL的偏好是使用带有破折号的单词,至少对我来说,这已经渗透到我的其他事物的命名约定中,像CSS选择器.

Answer 4

近年来,在连字符分隔的全字段URL中有明显的上升.这是SEO最佳实践的鼓励.Google明确"建议您在网址中使用连字符( - )而不是下划线(_)":http://www.google.com/support/webmasters/bin/answer.py？answer = 76329.

如上所述,不同的惯例在不同的情况下在不同的时间流行,但它们通常不是任何协议或框架的正式部分.

我的假设是,谷歌的位置将这种模式固定在一个关键环境(SEO)中,并且在类,id和属性名称中使用这种模式的趋势只是在这个大方向上缓慢移动.

Answer 5

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

我认为这篇文章全面地解释了它.

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

所以:

你不应该混合语法:它是不一致的.

Answer 6

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