在命名css选择器时使用大写、破折号或下划线

What are the best practices when naming CSS selectors?

命名CSS选择器的最佳实践是什么?

SomeContainerContent
some_container_content
some-container-content

I read the other similar questions here on stack overflow, but there is no general consensus in the answers. I was wondering if anyone else had more to add.

我在这里阅读了关于stack overflow的其他类似问题，但是在答案中没有普遍的共识。我想知道是否还有其他人要补充。

7 个解决方案

#1

The general thought is to use hyphens. There are, in fact, potential compatibility issues with other options.

一般的想法是用连字符。事实上，与其他选项存在潜在的兼容性问题。

Underscores are not allowed in class names or IDs in certain (granted, old, NS4-type) browsers.
在某些(给定的、旧的、ns4类型的)浏览器中，类名或id不允许使用下划线。
The CSS spec does not specify how browsers should handle case, so using camelCase leaves one open to ambiguous interpretation.
CSS规范没有规定浏览器应该如何处理大小写，所以使用camelCase会让人产生歧义。

Additionally, CSS uses hyphens internally for things like first-child.

此外，CSS在内部使用连字符，比如first-child。

Though the compatibility issues are generally a non-issue in modern browsers, that's how the standard came about, and I recommend sticking with it. You'd be fine if you were to deviate, but why bother?

尽管兼容性问题在现代浏览器中通常不存在，但这就是标准的由来，我建议坚持使用它。如果你偏离方向，你会没事的，但为什么要麻烦呢?

#2

.hyphens-for-multi-word-names
.underscores_for_pseudo_namespacing

Results in:

结果:

.grid-system_push-100
 \_________/ \______/
  namespace   object

Namespace and object can easily be purposed for a sort of BEM implementation.

命名空间和对象可以很容易地用于某种BEM实现。

.grid-slot { }          /* block */

.grid-slot_size-100 { } /* block-specific modifier */

._size-100              /* generic modifier */

My $0.02

我0.02美元

#3

I really think that it is up to you. However, what is important is to be consistent. For example, I like to use underscores for ids and dashes for classes.

我真的认为这取决于你。然而，重要的是要始终如一。例如，我喜欢对id使用下划线，对类使用破折号。

#4

It really does not matter and comes down to your personal taste. However, for a project it should be consistent! So, if there is already a css present, go for the style set by this style.

这真的不重要，取决于你的个人品味。然而，对于一个项目来说，它应该是一致的!所以，如果已经有css，就选择这个样式设置的样式。

#5

I use dashes (-) for everything HTML/CSS and underscores for PHP variables. Keeps things organised for me.

我使用dashes(-)为所有HTML/CSS和下划线的PHP变量。为我安排事情。

#6

I use dashes. Probably because lots of things on the web are case sensitive and I'm in a habit of using all lowercase for file names and such already when working on the web. Underscores are hard to see when underlined, so I shy away from them as well.

我使用破折号。可能因为web上的很多东西都是大小写敏感的，我习惯在web上使用所有的小写来表示文件名等等。下划线在下划线时很难看到，所以我也会避开下划线。

Seems most people CamelCase though:

似乎大多数人都是CamelCase:

poll on what people use

调查人们使用什么

#7

"In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F"."

在CSS中，标识符(包括元素名称、类和选择器中的id)只能包含字符[a-zA-Z0-9]和ISO 10646字符U+00A1和更高，加上连字符(-)和下划线(_);它们不能以数字开头，也不能以连字符后跟数字。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码(参见下一项)。例如，标识符“B&W?”可以写成“B\&W\?”或“B\26 W\3F”。

#1