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

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 methoodology

Answer 3

让我补充一点，下划线不会将一行分成单词。所以你可以（至少在 Windows 中）双击 some_selector，它会被选中，但是 some-selector 你必须手动选择才能复制。下划线可以节省大量复制的时间。