目录

很多开发人员讨厌 CSS。根据我的经验，这是因为没有花时间学习 CSS。 CSS 不是最漂亮的“语言”，但它已经成功地为 web 样式提供了超过 20 年的支持。还不错吧? 但是，当您编写更多的 CSS 时，您很快就会看到一个很大的缺点。 很难维护 CSS。 写得不好的 CSS 很快就会变成噩梦。 下面是一些命名规范，可以为您节省一些压力和时间。

章节配图

# 使用连字符’-'分隔字符串

如果你写了很多 JavaScript，那么驼峰式编写变量就是常见的做法。

var redBox = document.getElementById('...');

看起来还不错。 问题是这种命名形式不适合 CSS。 Do not do this:

.redBox {
  border: 1px solid red;
}

Instead, do this:

.red-box {
  border: 1px solid red;
}

这是一个非常标准的 CSS 命名规范。可以说它更具有可读性。 并且，它与 CSS 属性名称一致。

// Correct
.some-class {
  font-weight: 10em;
}
// Wrong
.some-class {
  fontweight: 10em;
}

# BEM 命名规范

每个团队有不同的方法来编写 CSS 选择器。有些团队使用连字符分隔符，而另一些团队则更喜欢使用名为 BEM 的结构化命名规范。 通常来讲，CSS 命名约定试图解决 3 个问题：

  1. 想知道选择器的作用，只需查看其名称即可。
  2. 想了解选择器的使用位置，只需查看它即可。
  3. 想了解类名之间的关系，只需查看它们即可。

你有没有见过这样的类名：

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

这就是 BEM 命名规范。

# 通过以下例子来解释 BEM

假设 BEM 将整个用户界面划分为小型可重用组件。 看下面的图片：

章节配图

这个火柴人代表整个组件。 你可能已经猜到 BEM 中的 B 代表 Block。 现实中，这个‘块’可以表示站点导航，页眉，页脚或者任何其他设计块。 按照上面的说法，这个组件理想的类名应该是stick-man。 组件的样式应该是：

.stick-man {
}

我们这里已经使用了分隔符，good！

章节配图

# E for Elements

BEM 中的 E 代表 Elements。 这个整体的组件很少孤立存在。 比如，火柴人有一个头，两个手臂，和脚。

章节配图

头部，脚部和手臂都是组件内的元素。它们可以被视为子组件，即整个父组件的子组件。 使用 BEM 命名规范，通过添加两个下划线,后跟元素名称来派生元素类名称。 For example:

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

# M for Modifiers

BEM 中的 M 代表修饰符。 如果这个火柴人被修改了，我们可以有一个蓝色或红色的火柴人，怎么办？

章节配图

现实中，这可以是红色按钮或蓝色按钮。这些是对相关组件的修改。 使用 BEM，通过添加两个连字符后跟元素名称来派生修饰符类名。 For example:

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

最后一个示例显示了父组件被修改。但这并非总是如此。 假如我们的火柴人有两个不同大小的头部，怎么办？

章节配图

现在元素被修改了。请记住，元素是整个包含块中的子组件。 .stick-man 代表 Block，.stick-man_head代表 Element。 根据上面的例子，双连字符应该这样使用：

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

Now you’ve got it. 这基本上是 BEM 命名约定的工作原理。 就我个人而言，对于简单的项目仅适用连字符分隔符类名称就可以，而对于更多页面则适用 BEM。 你可以阅读更多 (opens new window)关于 BEM 的信息。

CSS 命名规范 - BEM (opens new window)