使用破折号下划线命名类和 id 的 CSS 趋势？

Question

我一直使用破折号作为 css 类和 ID 名称的分隔符：

.about-us
.car-pricing-guide

我见过网站使用多个下划线

__

.home__content

另外，我还看到了 2 个破折号

.hero--title

我知道这是一个偏好问题，但有人可以指出这些模式的文章或思考过程吗？是否有朝着特定惯例迈出的一步，或者是否有一套人们似乎同意/遵循的流行惯例？

Answer 1

我是使用连字符的大力倡导者，它似乎确实更传统。很久以前，一些浏览器不支持类名和 ID 中的下划线，因此连字符是首选/标准化方法。即使查看 CSS，您也会发现像

border-color

这样的连字符随处可见，那么为什么不紧跟潮流呢？

连字符还允许您利用

|=

属性等功能。它可以让你做这样漂亮的事情：

span[class|="uppercase"] { text-transform: uppercase; }

两者都有结果

<h1 class="uppercase-header">The Three Little Pigs</h1>

和

<h2 class="uppercase-subheader">Chapter 1</h2>

两者都有风格

text-transform: uppercase;

现在，我从来没有真正使用过这个选择器...但是如果我需要的话，我的代码已经准备好了！

如果您仍然不相信连字符，这里有一些更好的例子来说明为什么它们是一个值得遵守的伟大标准：http://jasonbuckboyer.com/playground/use-hyphens-in-css/

Answer 2

双下划线遵循 BEM 方法。它基本上是一种命名类的方式，以便以后用户可以轻松理解。

BEM 背后的指导原则似乎是“设计页面时，考虑可重用的小部件”。这几乎是编写语义 HTML 的标准方式。

在此处了解有关 BEM 的更多信息：BEM 方法论

Answer 3

让我补充一下，下划线不会将一行分隔成单词。因此，您可以（至少在 Windows 中）双击

some_selector

，它将被选中，但要复制

some-selector

，您必须手动选择它。当您必须复制大量内容时，下划线可以节省时间。

（更新：不过，我应该注意，无论您的单词分隔符是什么，IDE 都可能会为您选择完整的 css 选择器）。