css命名规范

很多开发人员讨厌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。

你可以阅读更多关于BEM的信息。

参考

1. https://medium.freecodecamp.org/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849