在命名CSS选择器时，是否应使用大写字母、破折号或下划线？

Question

在命名 CSS 选择器时有哪些最佳实践？

SomeContainerContent
some_container_content
some-container-content

我阅读了stackoverflow上的其他类似问题，但答案中没有普遍共识。我想知道是否还有其他人可以补充。

- deb

---

没有共识，因为这并不重要。你可以用任何名字来命名它们！ - Shog9

Answer 1

一般的想法是使用连字符（hyphens）。实际上，其他选项存在潜在的兼容性问题。

• 在某些浏览器（尤其是老旧的NS4类型浏览器）中，类名或ID中不允许使用下划线。
• CSS规范没有规定浏览器如何处理大小写，因此使用驼峰命名法会导致歧义的解释。

此外，CSS在内部使用连字符来处理像first-child这样的事情。

虽然在现代浏览器中兼容性问题通常不是问题，但这就是标准的形成方式，我建议坚持使用它。如果你偏离了它，也没什么大碍，但为什么要费这个劲呢？

- Matchu

---

好的观点。此外，在Rails中，我无法在变量名称和辅助方法中使用连字符，如果我将它们保持用连字符分隔，则可以为区分CSS类添加另一个线索。 - deb

Answer 2

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

结果为：

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

命名空间和对象可以轻松地用于类似BEM实现。

.grid-slot { }          /* block */

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

._size-100              /* generic modifier */

我的看法

- Dan Lugg

Answer 3

我认为这取决于你自己。然而，重要的是保持一致。例如，我喜欢将id使用下划线，将class使用破折号。

- Randy Simon

---

这对我来说听起来有点不一致，因为我的大脑将CSS视为一个整体。这是为了在心理存储方面保持类和ID的分离吗？ - Matchu

Answer 4

真的并不重要，取决于个人口味。但是，对于一个项目来说，它应该是一致的！因此，如果已经存在CSS，请使用这种风格。

- AxelEckenberger

Answer 5

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

- alexnexus

Answer 6

我在HTML/CSS中使用破折号(-)，在PHP变量中使用下划线。这样对我来说更有组织性。

- Tom

Answer 7

我使用破折号。可能是因为网络上的许多事情都区分大小写，而当我在网络上工作时，已经习惯了对文件名等使用全小写字母。下划线在被下划线标记时很难看到，所以我也避免使用它们。

似乎大多数人使用驼峰命名法：

关于人们使用什么的投票

- Austin Fitzpatrick

---

这是一个有趣的链接，谢谢分享。对我来说，CamelCase 是最令人困惑的，因为我习惯于使用 CamelCase 的 Ruby 类名。 - deb