为什么CSS选择器/ HTML属性优先使用破折号？ [英] Why are dashes preferred for CSS selectors / HTML attributes?

问题描述

过去，我一直使用下划线在HTML中定义类和 id 属性。在过去几年中，我改用破折号，主要是为了配合社群中的趋势

In the past I've always used underscores for defining class and id attributes in HTML. Over the last few years I changed over to dashes, mostly to align myself with the trend in the community, not necessarily because it made sense to me.

我一直认为破折号有更多的缺点，我没有看到的好处：

I've always thought dashes have more drawbacks, and I don't see the benefits:

大多数编辑器将破折号视为字分隔符，因此我无法标记到我想要的符号。说类是特色产品，我必须自动完成特色，输入连字符，并完成 product 。

Most editors treat dashes as word separators, so I can't tab through to the symbol I want. Say the class is "featured-product", I have to auto-complete "featured", enter a hyphen, and complete "product".

使用下划线 featured_product 被视为一个字，因此可以在一个步骤中填写。

With underscores "featured_product" is treated as one word, so it can be filled in one step.

这同样适用于浏览文档。

The same applies to navigating through the document. Jumping by words or double-clicking on class names is broken by hyphens.

（更一般来说，我认为类和ids是标记所以对我来说，令牌在连字符上应该很容易拆分。）

(More generally, I think of classes and ids as tokens, so it doesn't make sense to me that a token should be so easily splittable on hyphens.)

使用破折号分隔对象属性访问表单元素在JavaScript中。这只能使用下划线：

Using dashes breaks object-property access to form elements in JavaScript. This is only possible with underscores:

form.first_name.value='Stormageddon';

（不可否认，我不以这种方式访问​​表单元素，一个普遍的规则，考虑某人可能。）

(Admittedly I don't access form elements this way myself, but when deciding on dashes vs underscores as a universal rule, consider that someone might.)

像 Sass 特别是在整个 Compass 框架中）已经以破折号作为标准，即使对于变量名也是如此。他们最初也使用下划线。不同的解析这个事实让我很奇怪：

Languages like Sass (especially throughout the Compass framework) have settled on dashes as a standard, even for variable names. They originally used underscores in the beginning too. The fact that this is parsed differently strikes me as odd:

$list-item-10
$list-item - 10

不同语言的变量命名不一致

回到当天，我曾经写过 underscored_names 用于PHP，ruby，HTML / CSS和JavaScript中的变量。这是方便和一致的，但再次为了适合我现在使用：

Inconsistency with variable naming across languages

Back in the day, I used to write underscored_names for variables in PHP, ruby, HTML/CSS, and JavaScript. This was convenient and consistent, but again in order to "fit in" I now use:

code> underscore_case 在PHP和ruby中

• dash-case in HTML/CSS
• camelCase in JavaScript
• underscore_case in PHP and ruby

但我不知道为什么这些变得如此失调，似乎有目的。至少有下划线可以保持一致性：

This doesn't really bother me too much, but I wonder why these became so misaligned, seemingly on purpose. At least with underscores it was possible to maintain consistency:

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

这些差异创造了我们必须翻译字符串，以及可能的错误。

The differences create situations where we have to translate strings unnecessarily, along with the potential for bugs.

所以我问：为什么社会几乎普遍地解决破折号，有什么理由超过下划线吗？

So I ask: Why did the community almost universally settle on dashes, and are there any reasons that outweigh underscores?

有一个相关问题从这开始的时候，但我的意见，它不是（或不应已经）只是一个品味的问题。

There is a related question from back around the time this started, but I'm of the opinion that it's not (or shouldn't have been) just a matter of taste. I'd like to understand why we all settled on this convention if it really was just a matter of taste.

推荐答案

代码完成

无论破折号被解释为标点符号还是作为不透明标识符，取决于所选择的编辑器。但是，作为一个个人喜好，我喜欢能够在一个CSS文件中的每个单词之间的选项卡，如果他们用下划线分隔，并且没有停止，会发现令人讨厌。

Code completion

Whether dash is interpreted as punctuation or as an opaque identifier depends on the editor of choice, I guess. However, as a personal preference, I favor being able to tab between each word in a CSS file and would find it annoying if they were separated with underscore and there were no stops.

此外，使用连字符可以充分利用属性选择器，它选择包含文本的任何元素，可选地后跟破折号：

Also, using hyphens allows you to take advantage of the |= attribute selector, which selects any element containing the text, optionally followed by a dash:

span[class|="em"] { font-style: italic; }

这将使以下HTML元素具有斜体字体样式：

This would make the following HTML elements have italic font-style:

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

与算术运算符的歧义

d说，通过JavaScript中的点符号访问HTML元素是一个错误，而不是一个功能。这是一个可怕的结构从早期的可怕的JavaScript实现，并不是一个真正的伟大的做法。对于目前使用JavaScript的大部分内容，您都希望使用 CSS选择器进行抓取元素从DOM反正，这使得整个点符号相当无用。

Ambiguity with arithmetic operator

I'd say that access to HTML elements via dot notation in JavaScript is a bug rather than a feature. It's a terrible construct from the early days of terrible JavaScript implementations and isn't really a great practice. For most of the stuff you do with JavaScript these days, you'd want to use CSS Selectors for fetching elements from the DOM anyway, which makes the whole dot notation rather useless. Which one would you prefer?

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

我发现两个第一选项更可取，特别是'＃ -name'可以替换为JavaScript变量并动态构建。我也发现他们在眼睛上更愉快。

I find the two first options much more preferable, especially since '#first-name' can be replaced with a JavaScript variable and built dynamically. I also find them more pleasant on the eyes.

Sass在CSS的扩展中启用算术并不真正适用于CSS本身，但我明白并且接受Sass遵循CSS的语言风格（除了 $ 变量前缀，这当然应该是 @ ）。如果Sass文档看起来和感觉像CSS文档，他们需要遵循与CSS相同的样式，它使用破折号作为分隔符。在CSS3中，算术仅限于 calc

The fact that Sass enables arithmetic in its extensions to CSS doesn't really apply to CSS itself, but I do understand (and embrace) the fact that Sass follows the language style of CSS (except for the $ prefix of variables, which of course should have been @). If Sass documents are to look and feel like CSS documents, they need to follow the same style as CSS, which uses dash as a delimiter. In CSS3, arithmetic is limited to the calc function, which goes to show that in CSS itself, this isn't an issue.

所有语言，标记语言，编程语言，样式语言或脚本语言都有自己的风格。你会发现这在XML语言组的子语言中，例如。 XSLT 使用带连字符分隔符的小写字母和 XML Schema 使用camel-casing。

All languages, being markup languages, programming languages, styling languages or scripting languages, have their own style. You will find this within sub-languages of language groups like XML, where e.g. XSLT uses lower-case with hyphen delimiters and XML Schema uses camel-casing.

一般来说，你会发现采用感觉和看起来最本地你的写作比尝试把你自己的风格变成每一种不同的语言都更好。因为你不能避免使用原生库和语言结构，你的风格将被原生风格污染，无论你喜欢与否，所以它甚至徒劳无益，甚至尝试。

In general, you will find that adopting the style that feels and looks most "native" to the language you're writing in is better than trying to shoe-horn your own style into every different language. Since you can't avoid having to use native libraries and language constructs, your style will be "polluted" by the native style whether you like it or not, so it's pretty much futile to even try.

我的建议是不要在各种语言之间找到最喜欢的风格，而是让自己在每种语言中自己在家，并学习去爱它所有的怪癖。 CSS的一个奇怪之处在于，关键字和标识符以小写字母写，并用连字符分隔。就个人而言，我认为这非常具有视觉吸引力，并认为它符合全小写（虽然没有连字符） HTML 。

My advice is to not find a favorite style across languages, but instead make yourself at home within each language and learn to love all of its quirks. One of CSS' quirks is that keywords and identifiers are written in lowercase and separated by hyphens. Personally, I find this very visually appealing and think it fits in with the all-lowercase (although no-hyphen) HTML.

这篇关于为什么CSS选择器/ HTML属性优先使用破折号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！