从有赞UI组件库看CSS BEM命名规范的好处

1.什么是BEM命名规范？

文字定义不说，看dem0:

解释：

• block 代表了更高级别的抽象或组件。
• .block__element 代表.block的后代，用于形成一个完整的.block的整体。
• .block--modifier代表.block的不同状态或不同版本。

用bem命名的好处是：

1.规定。适合前端团队的CSS写法规范化。

2.既然是规范，就特别适合阅读，让CSS也变得易阅读。

3.规范的写法，自然就特别适合用计算机编程实现。

 

看有赞组件库源码为例：

css代码：

js代码：

此处的bem就是下面的createBEM。

这里的gen方法如下：

可以看出，用bem名称CSS就很容易跟js结合起来写。

 

注意点：

1.如果有明显的父子关系，状态关系，可以用bem名称css 的class名字。如果是通用的class名字，比如left, right等可以抽取出来放在commom.css里面的，就不用bem命名了。也便于维护管理，没必要很死板，都用bem规范命名。