使用短划线下划线命名类和 id 的 CSS 趋势？

Question

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

.about-us
.car-pricing-guide

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

.home__content

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

.hero--title

我知道这是一个偏好问题，但有人可以指出这些模式的文章或流程吗？是否有朝着特定惯例的方向发展，或者是否存在人们似乎同意/遵循的一组流行惯例？

Answer 1

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

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

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

Answer 2

我是使用连字符的大力倡导者，它似乎更传统。很久以前，一些浏览器不支持类名和 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 3

让我补充一下，下划线不会将一行分隔成单词。因此，您可以（至少在 Windows 中）双击some_selector，它将被选中，但要复制，some-selector您必须手动选择它。当您必须复制大量内容时，下划线可以节省时间。