[译] 这些 CSS 命名规范将省下你大把调试时间

• 原文地址：CSS Naming Conventions that Will Save You Hours of Debugging
• 原文做者：Ohans Emmanuel
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：unicar
• 校对者：dazhi1011，swants

这些 CSS 命名规范将省下你大把调试时间

我据说不少开发者厌恶 CSS。而在个人经验中，这每每是因为他们并无花时间来学习 CSS。

CSS 算不上是最优美的『语言』，但迄今二十多年来，它都是美化 web 举足轻重的工具。从这点来讲，也还算不错吧？

尽管如此，CSS 写得越多，你越容易发现一个巨大的弊端。

由于维护 CSS 真是老大难。

特别是那些写得差劲的 CSS 会很快变成程序员的噩梦。

这里向你们介绍一些命名规范，遵守这些规范能够省时省力，少走弯路。

对此你必定深有体会吧？

使用连字符分隔的字符串

若是你常写 JavaScript，那么你知道对变量使用驼峰式命名法（camel case）是一种惯例。

var redBox = document.getElementById('...')
复制代码

这样很好，对吧？

但问题是这种命名法并不适用于 CSS。

请切忌以以下方式命名：

.redBox {
  border: 1px solid red;
}
复制代码

相应的，你能够这样写：

.red-box {
   border: 1px solid red;
}
复制代码

这是一种很是标准的 CSS 命名规范。也能够说更易读。

同时，这也和 CSS 属性名称保持了一致。

// Correct
.some-class {
   font-weight: 10em
}
// Wrong
.some-class {
   fontWeight: 10em
}
复制代码

BEM 命名规范

不同的团队在写 CSS 选择器（CSS selectors）有不同的方法。有些团队使用的是连字符分隔（hyphen delimiters）法，还有一些倾向于使用一种叫 BEM 的命名法，这种方法更加有条理。

总的来讲，这些 CSS 命名规范试图解决 3 类问题：

1. 仅从名字就能知道一个 CSS 选择器具体作什么
2. 从名字能大体清楚一个选择器能够在哪里使用
3. 从 CSS 类的名称能够看出它们之间的联系

不知你是否见过这样的类名：

.nav--secondary {
  ...
}
.nav__header {
  ...
}
复制代码

这就是 BEM 命名规范。

向 5 岁小孩解释 BEM 规范

BEM 规范试图将整个用户界面分解成一个个小的可重复使用的组件。

让咱们来看看下图：

这但是个足以得奖的火柴人呢 :)

哎，惋惜并非 :(

这个火柴人表明了一个组件，好比说一个设计区块。

或许你已经猜到了 BEM 这里的 B 意为『区块』（‘Block’）。

在实际中，这里『区块』能够表示一个网站导航、页眉、页脚或者其余一些设计区块。

根据上述解释，那么这个组件的理想类名称便是 stick-man。

组件的样式应写成这样：

.stick-man {
  
 }
复制代码

在这里咱们使用了连字符分隔法，很好！

E 表明元素（Elements）

BEM 中的 E 表明着元素。

总体的区块设计每每并非孤立的。

比方说，这个火柴人有一个头部（head），两只漂亮的手臂（arms）和双脚（feet）。

The head , feet, and arms are all elements within the component. They may be seen as child components, i.e. children of the overall parent component. 这些 head、 feet 和 arms 都是组件中的元素。它们可视做子组件（child components），也就是父组件的组成部分。 若是使用 BEM 命名规范的话，这些元素的类名均可以经过在两条下划线后加上元素名称来产生。

好比说：

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}
复制代码

M 表明修饰符（Modifiers）

M 在 BEM 命名法中表明修饰符。

若是说这个火柴人有个 blue 或者 red 这样的修饰符怎么办呢？

在现实场景里，这多是一个 red 或者 blue 的按钮。这就是以前在讲的组件当中的限定修饰。

若是使用 BEM 的话，这些修饰符的类名均可以经过在两条连字符后加上元素名来产生。

好比说：

.stick-man--blue {
}
.stick-man--red {
}
复制代码

最后这个例子展现的是父组件加修饰符。不过这种状况并不常常出现。

假如咱们这个火柴人拥有另外一个不同的头部大小呢？

这一次元素被加上了修饰符。记住，元素指一个总体封装区块中的一个子组件。

.stick-man 表示区块（Block）， .stick-man__head 表示元素（the element）。

从上例能够看出，双连字符也能够这样使用：

.stick-man__head--small {
}
.stick-man__head--big {
}
复制代码

重申一次，上例中使用的双连字符是用来指代修饰符的。

这样你都明白了吧。

这就是 BEM 的基本用法。

我的来讲，我在小项目中通常只用连字符分割法来写类名，在用户界面更复杂的项目中使用 BEM 方法。

关于 BEM，从这里了解更多

BEM - Block Element Modifier: _BEM - Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the…_getbem.com

为什么要使用命名规范？

在计算机科学当中只有两类难题：缓存失效和命名 - Phil Karlton

命名的确很难。因此咱们要尽可能把它变得容易点，也为之后维护代码省点时间。

能正确命名 CSS 中的类名可让你的代码变得更易理解和维护。

若是你选择 BEM 命名规范，在看标记语言（markup）时就更容易看清各个设计组件/区块之间的关系。

感受不错吧？

和 JavaScript 关联的 CSS 名称

今天是 John 上班第一天。

他拿到了以下一段 HTML 代码：

<div class="siteNavigation">
</div>
复制代码

由于恰好读了这篇文章，John 意识到这种命名方法在 CSS 中不是最好的方法。因而他将代码修改为下面这样：

<div class="site-navigation">
</div>
复制代码

看上去不错吧？

不过 John 没想到的是，他把整个代码库搞砸了 😩😩😩

为何会这样？

在 JavaScript 代码中，有一段是和以前的类名 siteNavigation 有关联的：

// Javascript 代码
const nav = document.querySelector('.siteNavigation')
复制代码

因为类名的改变，nav 变量如今变成了 null。

好忧桑。😔😔

为了防止这种状况发生，开发者们想了不少不一样的策略。

1. 使用 js- 类名

一种减小这类 bug 的方法是使用 js- 的类名命名方法。用这种方法来代表这个 DOM 元素和 JavaScript 代码的关联。

例如：

<div class="site-navigation js-site-navigation">
</div>
复制代码

一样的在 JavaScript 代码中：

//the Javasript code
const nav = document.querySelector('.js-site-navigation')
复制代码

依照命名规范，任何人看到 js-site-navigation 这个类名称，就会知道 JavaScript 代码中有一段和这个 DOM 元素有关联的代码。

2. 使用 Rel 属性

我本身没用过这种方法，不过我看到其余人用过。

你是否熟悉这样的代码？

<link rel="stylesheet" type="text/css" href="main.css">
复制代码

通常来讲，rel 属性 定义着连接资源和引用它的文件之间的关系。

回头看 John 的例子，这种方法建议咱们写成以下的形式：

<div class="site-navigation" rel="js-site-navigation">
</div>
复制代码

同时在 JavaScript 中：

const nav = document.querySelector("[rel='js-site-navigation']")
复制代码

我对这种方法持保留态度。不过你极可能在某些代码库中看到它们。这种方法就好像在说：“好吧，这里和 Javascript 有个关联，那么我就用 rel 属性来表示这种关联。”

互联网这个地方，解决同一个问题经常有无数种『方法』。

3. 别用数据属性（data attributes）

有些开发者用数据属性（data attributes）做为 JavaScript 钩子。这是不对的。根据定义，data 属性（data attributes）是用来 储存自定义数据（to store custom data） 的。

这里数据属性（data attributes）用得很妙。正如这条 Twitter 上所说的。

附加提议：写更多的 CSS 注释

这跟命名规范毫无关系，但也能帮你节省时间。

尽管不少 web 开发者尽可能不写 Javascript 评论或者只针对某些状况才写，但我认为你应该写更多的 CSS 注释。

这是由于 CSS 不是最简洁优雅的『语言』，有条理的注释可让你花更少时间来理解本身的代码。

有益无弊，何乐不为。

你能够看看 Bootstrap 的注释写得有多好。source code

你倒不须要写一个 color: red 的注释告诉本身这是把颜色定为红色。但若是你用了一个不太简单明了的 CSS 小技巧，这时候大能够写写注释说明一下。

准备好成为 CSS 大牛了么？

我建立了一本可让你 CSS 技能飙升的指南。这里领取免费电子书

你不知道的七种 CSS 秘籍。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。