Javascript 和 CSS，使用破折号

Javascript and CSS, using dashes

提问by Choy

I'm starting to learn some javascript and understand that dashes are not permitted when naming identifiers. However, in CSS it's common to use a dash for IDs and classes.

我开始学习一些 javascript 并理解命名标识符时不允许使用破折号。但是，在 CSS 中，通常对 ID 和类使用破折号。

Does using a dash in CSS interfere with javascript interaction somehow? For instance if I were to use getElementByID("css-dash-name"). I've tried a few examples using getElementByID with dashes as a name for a div ID and it worked, but I'm not sure if that's the case in all other context.

在 CSS 中使用破折号是否会以某种方式干扰 javascript 交互？例如，如果我要使用getElementByID("css-dash-name"). 我已经尝试了一些使用 getElementByID 和破折号作为 div ID 名称的示例并且它有效，但我不确定在所有其他上下文中是否也是这种情况。

回答by Parrots

Having dashes and underscores in the ID (or class name if you select by that) that won't have any negative effect, it's safe to use them. You just can'tdo something like:

ID 中的破折号和下划线（或类名，如果您选择它）不会产生任何负面影响，使用它们是安全的。你不能做这样的事情：

var some-element = document.getElementByID('css-dash-name');

The above example is going to error out because there is a dash in the variable you're assigning the element to.

上面的例子会出错，因为在你分配元素的变量中有一个破折号。

The following would be fine though since the variable doesn't contain a dash:

但是，由于变量不包含破折号，因此以下内容没有问题：

var someElement = document.getElementByID('css-dash-name');

That naming limitation onlyexists for the javascript variables themselves.

该命名限制仅存在于 javascript 变量本身。

回答by Guffa

It's only in the cases where you can access the elements as properties that it makes a difference. For example form fields:

只有在您可以将元素作为属性访问的情况下，它才会有所作为。例如表单字段：

<form>
   <input type="text" name="go-figure" />
   <input type="button" value="Eat me!" onclick="...">
</form>

In the onclick event you can't access the text box as a property, as the dash is interpreted as minus in Javascript:

在 onclick 事件中，您无法将文本框作为属性访问，因为破折号在 Javascript 中被解释为减号：

onclick="this.form.go-figure.value='Ouch!';"

But you can still access it using a string:

但是您仍然可以使用字符串访问它：

onclick="this.form['go-figure'].value='Ouch!';"

回答by Pekka

Whenever you have to address a CSS property as a JavaScript variable name, CamelCase is the official way to go.

每当您必须将 CSS 属性作为 JavaScript 变量名称进行寻址时，CamelCase 是官方的方法。

element.style.backgroundColor = "#FFFFFF";

You will never be in the situation to have to address a element's ID as a variable name. It will always be in a string, so

您永远不会遇到必须将元素的 ID 作为变量名称进行寻址的情况。它总是在一个字符串中，所以

document.getElementById("my-id");

will always work.

将永远工作。

回答by Pekka

Using Hypen (or dash)is OK

使用 Hypen （或破折号）是可以的

I too is currently studying JavaScript, and as far as I read David Flanagan's book (JavaScript: The Definitive Guide, 5th Edition)— I suggest you read it. It doesn't warn me anything about the use of hypen or dash (-) in IDs and Classes (even the Name attribute)in an HTML document.

我目前也在学习 JavaScript，就我读过 David Flanagan 的书（JavaScript：权威指南，第 5 版）而言——我建议你阅读它。它不会警告我在 HTML 文档的ID 和类（甚至名称属性）中使用连字符或破折号 (-) 。

Just as what Parrots already said, hypens are not allowed in variables, because the JavaScript interpreter will treat it as a minus and/or a negative sign; but to use it on strings, is pretty much ok.

正如 Parrots 所说，变量中不允许使用连字符，因为 JavaScript 解释器会将其视为减号和/或负号；但是在字符串上使用它几乎没问题。

Like what Parrots and Guffa said, you can use the following ...

就像 Parrots 和 Guffa 所说的那样，您可以使用以下...

1. [ ] (square brackets)
2. '' (single quotation marks or single quotes)

3. "" (double quotation marks or double quotes)

   to tell the JavaScript interpreter that your are declaring strings (the id/class/name of your elements for instance).

1. [ ] （方括号）
2. '' （单引号或单引号）

3. "" （双引号或双引号）

   告诉 JavaScript 解释器您正在声明字符串（例如元素的 id/class/name）。

Use Hyphen (or dash) — for 'Consistency'

使用连字符（或破折号）——表示“一致性”

@KP, that would be ok if he is using HTML 4.1 or earlier, but if he is using any versions of XHTML (.e.g., XHTML 1.0), then that cannot be possible, because XHTML syntax prohibits uppercase (except the !DOCTYPE, which is the only thing that needs to declared in uppercase).

@KP，如果他使用 HTML 4.1 或更早版本就可以了，但是如果他使用任何版本的 XHTML（例如，XHTML 1.0），那么这是不可能的，因为 XHTML 语法禁止大写（除了 !DOCTYPE，这是唯一需要以大写形式声明的内容）。

@Choy, if you're using HTML 4.1 or earlier, going to either camelCase or PascalCase will not be a problem. Although, for consistency's sake as to how CSS use separators (it uses hypen or dash), I suggest following its rule. It will be much more convinient for you to code your HTML and CSS alike. And moreoever, you don't even have to worry if you're using XHTML or HTML.

@Choy，如果您使用的是 HTML 4.1 或更早版本，则使用 camelCase 或 PascalCase 都不是问题。虽然，为了保持一致性，CSS 如何使用分隔符（它使用连字符或破折号），我建议遵循其规则。您可以更方便地编写 HTML 和 CSS 代码。而且，您甚至不必担心您使用的是 XHTML 还是 HTML。

回答by Gumbo

IDs are allowed to contain hyphens:

ID 可以包含连字符：

• IDand NAMEtokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

• ID和NAME标记必须以字母 ([A-Za-z]) 开头，后面可以跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") 、冒号 (":") 和句点 (".")。

And there is no restriction when using IDs in JavaScript except if you want to refer to elements in the global scope. There you need to use:

在 JavaScript 中使用 ID 没有任何限制，除非您想引用全局范围内的元素。在那里你需要使用：

window['css-dash-name']

回答by Mike Trpcic

No, this won't cause an issue. You're accessing the ID as a string (it's enclosed in quotes), so the dash poses no problem. However, I would suggest not using document.getElementById("css-dash-name"), and instead using jQuery, so you can do:

不，这不会造成问题。您将 ID 作为字符串访问（用引号括起来），因此破折号没有问题。但是，我建议不要使用 document.getElementById("css-dash-name")，而是使用jQuery，所以你可以这样做：

$("#css-dash-name");

Which is much clearer. the jQuery documentation is also quite good. It's a web developers best friend.

这要清楚得多。jQuery 文档也很不错。它是 Web 开发人员最好的朋友。

回答by KP.

Other answers are correct as far as where you can and can't use hyphens, however at the root of the question, you should consider the idea of not using dashes/hyphens in your variable/class/ID names altogether. It's not standard practice, even if it does work and requires careful coding to make use of it.

就您可以和不能使用连字符的地方而言，其他答案是正确的，但是在问题的根源上，您应该考虑在变量/类/ID 名称中完全不使用破折号/连字符的想法。这不是标准做法，即使它确实有效并且需要仔细编码才能使用它。

Consider using either PascalCase (all words begin in capital) or camelCase (first word begins in lowercase, following words being in uppercase). These are the two most common, accepted naming conventions.

考虑使用PascalCase（所有单词都以大写开头）或camelCase（第一个单词以小写开头，后面的单词以大写开头）。这是两种最常见的、公认的命名约定。

Different resources will recommend different choices between the two (with the exception of JavaScript which is pretty much always recommended camelCase). In the end as long as you are consistent in your approach, this is the most important part. Using camel or Pascal case will ensure you don't have to worry about special accessors or brackets in your code.

不同的资源会推荐两者之间的不同选择（JavaScript 除外，它几乎总是推荐使用驼峰式命名法）。最后，只要您的方法保持一致，这就是最重要的部分。使用骆驼或帕斯卡案例将确保您不必担心代码中的特殊访问器或括号。

For JavaScript conventions, try this question/discussion:

对于 JavaScript 约定，试试这个问题/讨论：

javascript naming conventions

JavaScript 命名约定

Here's another great discussion of conventions for CSS, Html elements, etc:

这是对 CSS、Html 元素等的约定的另一个很好的讨论：

What's the best way to name IDs and classes in CSS and HTML?

在 CSS 和 HTML 中命名 ID 和类的最佳方法是什么？