前端开发
CSS

命名 CSS 的类或 id 时单词间如何连接？

css类或id命名时单词间连接通常有这几种写法： 驼峰式：solutionTitle solutionDtl 用-连接：solution-title …
关注者
210
被浏览
52,259

22 个回答

团队习惯

- 是连字符，从语义上，感觉更符合 css 中 class 的命名含义（组合式）

我翻译的 CSSwizadry 的

CSS-Guidelines

，把其中关于命名规范的部分贴过来。

命名规范

一般情况下我都是以连字符（-）连接 class 的名字（例如 .foo-bar 而非 .foo_bar 或 .fooBar），不过在某些特定的时候我会用 BEM（Block, Element, Modifier）命名法。
BEM 命名法可以使得选择器更规范，更清晰，更具语义。
该命名法按照如下格式：
.block{}
.block__element{}
.block--modifier{}

其中：
  • .block 代表某个基本的抽象元素；
  • .block__element 代表 .block 这一整体的一个子元素；
  • .block--modifier 代表 .block 的某个不同状态。
打个比方：
.person{}
.person--woman{}
    .person__hand{}
    .person__hand--left{}
    .person__hand--right{}

这个例子中我们描述的基本元素是一个人，然后这个人可能是一个女人。我们还知道人拥有手，这些是人体的一部分，而手也有不同的状态，如同左手与右手。

这样我们就可以根据亲元素来划定选择器的命名空间并传达该选择器的职能，这个选择器是一个子元素（__）还是亲元素的不同状态（--）？

由此，.page-wrapper 是一个独立的选择器。这是一个符合规范的命名，因为它不是其它元素的子元素或其它状态；然而 .widget-heading 则与其它对象有关联，它应当是 .widget 的子元素，所以我们应当将其重命名为 .widget__heading。

BEM 命名法虽然不太好看，而且相当冗长，但是它使得我们可以通过名称快速获知元素的功能和元素之间的关系。与此同时，BEM 语法中的重复部分非常有利于 gzip 的压缩算法。

无论你是否使用 BEM 命名法，你都应当确保 class 命名得当，力保一字不多、一字不少；将元素命名抽象化以提高复用性（例如 .ui-list，.media）。由此延伸出去的元素命名则要尽量精准（例如 .user-avatar-link）。不用担心 class 名的数量或长度，因为写得好的代码 gzip 也能有效压缩。

完整译文：

yukir.net/CSS-Guideline