CSS命名法BEM与scoped、module

刚入行前端的时候，看见了百度的前端代码规范，到现在只是其中的几个点一直有在注意。有兴趣可以看看： 百度前端编码规范

CSS命名其实挺随意的，使用驼峰、-、_都可以，并不影响使用，常用的应该是-和下划线_连接。我一直使用的是-，因为各大UI库或者是CSS库都是使用-，这应该也成为一个标准规范。

CSS挺容易造成样式污染的，每个模块或者页面之间，总有一些命名容易相同，解决也简单，用权重或者重写，只是这种场景有时候还是挺头疼。

scoped

vue中，style都会加上scoped，打包之后标签上面会有很多data-v-4df10a14，而CSS是.test[data-v-65a7937e]。 平时我们不会关注这个，这其实是CSS的属性选择器，打包的时候给每个标签都添加一个唯一的data-v-hash。

module

这个没用过，也没有去弄个demo，大致意思就是可以自己定义编译的规则，把类名编译成只对当前组件有效的字符串，可以是hash字符，也可以是带组件名类名加hash字符串，最终就是得到唯一的类名。

test.vue
.test-button{}

//编译成
.test_test-button_4df1{}
//或者
._3zyde4l1yATCOkgn{}

BEM模式

这个是原生的命名规则，纯粹靠自我约束，BEM由块（Block）、元素（Element）、修饰符（Modifier）组成，块__元素--修饰符：

• B:block,对应模块名，如dialog
• E:element 对应模块中的节点，如button
• M:modifier 对应节点的状态，disabled
• 最终class名 dialog__button--disabled

使用BEM的element：el-cascader-node__label、el-date-table-cell__text 其它没去找。

每种方法都各自有优缺点，无非就是从样式污染、样式覆盖、命名规范。

scoped：做到了样式隔离在内部，但是会被外部或者子组件被父组件污染，或者得用deep进行穿透，如果dom特别多的情况下，data-v-hash会稍微导致页面渲染性能。

module：通过类名，做到了绝对隔离，但又因为绝对隔离，修改样式或者复用又变得困难。

BEM：隔离和污染做的很好，但是名字太长长，命名困难，多人协作的情况下通过人为约定约束实现BEM太过困难。

在我看来，scoped > module > BEM，引用工具来约束和人为约束肯定是选择使用工具去约束，module和scoped对比，也只是工具对类名的不同处理。