那些可节省调试时间的 CSS 命名规范 已翻译 100%

我已经听许多的开发者说过他们讨厌 CSS，而根据我得经验，他们这样说根本是因为没有花时间去好好学习学习 CSS。

CSS 并非最好的“语言”，但是它确实已经成功驱动着网页的样式呈现超过 20 年，表现并不赖，不是么？

然后，在你写了许多的 CSS 之后，很快就会发现一个很不好的地方。

维护 CSS 是一件很困难的事情。

写的很糟糕的 CSS 很快就会变成你的一个噩梦。

下面是一些命名约定，对于解决你的压力并节省你的时间多少会有一些帮助。

使用连字符分割的字符串

如果你写过许多 JavaScript 代码的话，那么使用驼峰式来写变量就是家常便饭了：

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 选择器。有一些团队使用连字符分割，也有其他的则喜欢使用被称为 BEM 的更加结构化的命名约定。

通常，CSS 命名约定要试着去解决如下三个问题：

1. 只要看一眼名称，就知道一个选择器是做什么的

2. 只要瞧一眼，就明白选择器可以被用在哪里

3. 只要看看它们，就知道类名称之间的关系

你见过写得像下面这样的类名称吗:

.nav--secondary {
  ...
}.nav__header {
  ...
}

这样写遵循的就是 BEM 命名约定。

给 5岁小孩解释 BEM

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

看看下面这幅图：

这是一个火柴人获奖的形象 :)

不，并非获奖形象 :(

火柴人代表一个组件，比如设计的一块。

在真实世界中，这个可以是一个网站的导航、头部、尾部或者设计的其它任何一块。

遵循上述实践，这一组件的理想类名就是火柴人了。

组件应该像这样被赋予样式：

.stick-man {
  
 }

刚刚我们使用的就是分隔符字符串了，很好！

E 代表元素（Elements）

“BEM” 里面的 E 表示元素。

设计的所有块很少单独存在。

例如，火柴人有头、两条华丽的手臂，还有腿。

头、手臂和腿都是组件里面你的元素。它们被视为子组建, 例如，整个父组件的子组件。

使用 BEM 命名约定，元素的类名是通过添加两个下划线, 后面再跟上元素名称，如此派生而来的。

例如：

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M 代表修饰符（Modifier）

“BEM” 中的 M 代表的是修饰符。

如果火柴人被修改了，而我们有了一个拥有蓝色或者红色的火柴人，该如何呢?

在真实的世界中，这也许就是一个红色的按钮或者蓝色按钮了。这些都是对有关组件的修改。

使用 BEM, 修饰符类名是通过添加两个分隔符后面跟着元素名称，如此派生而来的。

例如：

.stick-man--blue {
}
.stick-man--red {
}

上面这个示例显示父组件被修改了。不过情况并非总是这样。

如果我们有不同头部大小的火柴人，又该如何呢?

这一次是元素被修改了。要记住，元素是整个块中包含的一个子组件。

.stick-man 表示的是整个块 , 而 .stick-man__head 就是元素了。

就跟你在上面看到的示例一样，两个分隔符或许也可以像下面这样使用：

.stick-man__head--small {
}
.stick-man__head--big {
}

再次注意上述示例中双分割符是如何使用的。这里是被用来表示一个修饰符了。

现在你已经掌握了吧。

这些就是 BEM 命名约定如何使用的基础知识了。

我个人倾向于在简单的项目中只使用分隔符，而更加复杂的用户界面再去使用 BEM。

你可以从这里更多地去了解 BEM。

为什么要使用命名约定？

计算机科学中只有两类难题: 缓存失效以及为事物命名 — Phil Karlton

为事物命名是一个难题。我们试着去写更多可维护的代码。使得事情变简单，同时还可以节约我们自己的时间。

在 CSS 中正确的为事物命名可以使你的代码更容易阅读和维护。

如果你选择使用 BEM 命名约定，那想要看出你的设计组件/块之间的关系就是一件再简单不过的事情了，只要看一眼标记就可以了。

自信心爆棚了是不?

带有 JavaScript 钩子的 CSS 命名

今天是 John 第一天上班。

他接手了如下一段 HTML 代码：

<div class="siteNavigation">
</div>

John 已经阅读了本文，所以意识到这可能并非在 CSS 命名的最佳方式。所以他立马就对代码库进行了重构，像下面这样：

<div class="site-navigation">
</div>

瞧着挺好，对不?

John 还不知道，他把代码库搞乱了。

怎么回事?

在 JavaScript 代码的某些地方是跟之前的类名 siteNavigation 存在关系的:

//the Javasript code
const nav = document.querySelector('.siteNavigation')

所以一旦修改了类名， nav 变量就会变成 undefined 的。

好可恶啊。

为了能防止像这样的情况发生，开发者想出了各种策略。

1. 使用带有 js- 前缀的类名

一种缓解这类问题的办法就是用像 js-* 这样的类名，来表明其与问题 DOM 元素的关系。

例如：

<div class="site-navigation js-site-navigation">
</div>

而在 JavaScript 代码中则是这样写：

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

作为一项约定，任何看到 js-site-navigation 这个类名的人都应该明白它跟 JavaScript 代码中的 DOM 元素是有关系的。