谈谈一些有趣的CSS题目（14）-- 为何要规范 CSS 命名方式，及 BEM

[Coco]

14、为何要规范 CSS 命名方式，及 BEM

CSS 的命名方式及规范一直处于很混乱的状态，每个团队内部或多或少都有自己的标准。

为什么要规范 CSS 的命名方式？

有过接手别人项目的经历的话，肯定会有这样的感触。就算只是修改几处样式，面对一大堆不是自己写的 CSS ，内心也是崩溃的。

不规范的或者没有统一的命名方式，让你不敢修改别人的 CSS，他写的这个样式是否有在其他地方引用？这个样式怎么在 DOM 中使用了，但是在样式表中没法找到，能不能删除？

而良好的 CSS 命名规范，则能有效的规避大部分这些问题。

譬如我们组内遵循的一套命名规范，其中比较重要的一部分：

• 布局：以 g 为命名空间，例如：g-wrap 、g-header、g-content
• 状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：s-current、s-selected
• 工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis
• 组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu
• 钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open

我觉得没有说哪个规范是最好的，适合自己团队的，能够提高效率的命名规范就是好的。

这里再介绍一下比较受欢迎的 BEM 命名规范。

BEM的意思就是块（block）、元素（element）、修饰符（modifier），是由 Yandex 团队提出的一种 CSS Class 命名方法。

类似于：

.block{}
.block__element{}
.block--modifier{}

BEM 这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM代表块（Block），元素（Element），修饰符（Modifier）。上图很好地解释了什么是块，什么是元素。

• 就一个页面来说，开发者其实知道它是由各类模块「块」构成的。这个 Block 并非 inline-block 里的 block，而是所有东西都划分为一个独立的模块，block 是可以相互嵌套的。

• 而「元素」是块中的一部分，具有某种功能。元素是依赖上下文的。

• 它们只有处于他们应该属于的块的上下文中时才是有意义的。「修饰符」则表示块或元素的一些状态，如 hover、active 和 disabled 等。

BEM 中，一个项目中的块名必须是唯一的，明确指出它所描述的是哪个块。相同块的实例可以有相同的名字。一个块范围内的一种元素的名字也必须是唯一的。一种元素可以重复出现多次。

最终使用 BEM 命名出来的 CLASS 样式文件肯定是很不美观，因为使用了单下划线，双下划线，双连接线。但是项目具有一定规模之后，这种命名方式带来的好处也是显而易见的。

BEM **的优劣，可以看看知乎大猫的回答：

如何看待 CSS 中 BEM 的命名方式？

--

最后，新开通的公众号求关注，形式希望是更短的篇幅，质量更高一些的技巧类文章，包括但不局限于 CSS：