带有下划线的命名类和 id 的 CSS 趋势？答案

【问题标题】：CSS trends with naming class and id with dash underscore?带有下划线的命名类和 id 的 CSS 趋势？
【发布时间】：2016-08-11 03:30:54
【问题描述】：

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

.about-us
.car-pricing-guide

我看到网站使用多个下划线__

.home__content

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

.hero--title

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

【问题讨论】：

两个破折号很不寻常，我不能说我见过。但是，连字符可能是最受欢迎的。
这是 BEM 约定（块元素修饰符）。 __ 代表元素， -- 代表修饰符。您可以参考此网址以获得更好的理解。 en.bem.info/method/naming-convention
@NikhileshKV，BEM 是一个很好的参考
@claudios 是的。它使代码模块化。我经常使用它。

【解决方案1】：

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

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

在此处了解有关 BEM 的更多信息：BEM methoodology

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

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

【讨论】：