刚入行前端的时候，看见了百度的前端代码规范，到现在只是其中的几个点一直有在注意。有兴趣可以看看： 百度前端编码规范
CSS命名其实挺随意的，使用驼峰、-、_都可以，并不影响使用，常用的应该是-和下划线_连接。我一直使用的是-，因为各大UI库或者是CSS库都是使用-，这应该也成为一个标准规范。
CSS挺容易造成样式污染的，每个模块或者页面之间，总有一些命名容易相同，解决也简单，用权重或者重写，只是这种场景有时候还是挺头疼。
scoped
vue中，style都会加上scoped，打包之后标签上面会有很多data-v-4df10a14，而CSS是.test[data-v-65a7937e]。 平时我们不会关注这个，这其实是CSS的属性选择器，打包的时候给每个标签都添加一个唯一的data-v-hash。
module
这个没用过，也没有去弄个demo，大致意思就是可以自己定义编译的规则，把类名编译成只对当前组件有效的字符串，可以是hash字符，也可以是带组件名类名加hash字符串，最终就是得到唯一的类名。
代码语言：javascript复制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对比，也只是工具对类名的不同处理。
