本文属于原创文章，转载请注明--来自桃源小盼的博客
前言
由于团队使用了vue框架，所以有些规范是在vue规则下制定的。
命名规则参考上一篇文章前端规范与思考(一)———命名规范。
标准规范
1.组件中的style标签使用scoped属性，如果有全局生效的样式，新增一个无scoped属性的style标签
2.选择器命名使用串行命名法
// bad
.activityTitle {
}.activity_title {
}// good
.activity-title {
}为什么不采用复杂的BEM方式？ 因为现在我们有了更好的方式：css模块化。vue的scoped是其中的一种实现方式，我们不再需要BEM中的模块前缀，来隔离不同的模块。
3.禁止选择器嵌套
特殊情况：覆盖第三方库的样式时。
如果选择器嵌套，那么当html结构改变时，css样式也要改变，增加维护成本。
// bad.activity .item {
}// good.activity-item {
}4.类名组合单词长度不要超过5级
// bad
.activity-box-item-ul-li-a {
}// good
.activity-item-li-a {
}5.禁止使用标签选择器
标签选择器会同时命中多个标签，修改单条css样式会影响多个地方。
// bad
li {
}// good
.activity-item {
}6.禁止使用!important
【前端规范与思考(二)———css规范】一旦样式使用了important，如果需要被覆盖时，难以被覆盖。
7.禁止使用id选择器
id选择器具有唯一性，并且权重过高。
8.禁止使用*号选择器
理由：影响范围太大，造成的结果很难预料。
9.z-index不要设置过大， 一般的浮层元素1-9，弹窗之类的10-99
特殊情况：覆盖第三方类库
10. 块级元素默认width: 100%，不用声明
经常会有小伙伴写出这个样式，只是为了提醒。
推荐规范 1.盒子、容器命名
.activity-box {}
.activity-wrapper {}
.activity-container {}2.图片命名
.activity-img {}3.列表命名
.activity-item {}
.activity-li {}4..超链接a标签命名
.activity-a {}
.activity-link {}5.相关描述命名
.activity-desc {}6.表单元素命名
.activity-input {}
.activity-radio {}
.activity-checkbox {}7.交互状态命名
激活状态类名：.active
禁用状态类名：.disabled
.item.active {
color: red;
}
8. 优先使用flex布局
结语 其实对于一个团队来说，任何可能重复、经常会犯错的点、更好的写法。这一类的事情都可以去提炼成规范。
对于css来说，制定团队的reset.css也是必不可少的一部分。
任何别人的规范，都不是银弹，我们只能去探索最适合自己的css规范。
参考资料
- 《深入解析css》
- 《css选择器世界》
- 凹凸实验室
