这是个人偏好，可以参考。丑陋的秩序也比无秩序更好
- 使用简化的BEM版本
block__element
block__class
.my_setting{
&__add_btn{
color:blue;
}
}
.my{
&__add_btn{
color:red;
}
}
- 命名风格：模块用连接线，下一级为驼峰
first_name_state
例子：
.save_btn{
&_default{
color:black;
}
&:hover{
background:#fafafa;
}
&_actived{}
}
.x_btn{
&_primary{
}
}
--->css
.save_btn_default{
//...
}
//....
- 使用css module 进行模块化，不建议使用vue自带的scope
因为需要模块化的场景都是spa，而现在的spa往往使用react或vue，官网就有教程。如果你的开发环境是jquery等系统，那就比较麻烦。目前我的选择是：简单网页用jquery，复杂spa用vue，所以也没考虑这种情况的解决方法。 - spa中往往需要一个通用的css，里面的样式是通用的，可以直接拿来用，但具体模块的开发人员不能修改。如果真的需要修改，应当使用css module里的global关键字嵌套到具体模块中
.myBlog__title{
:global(.x-btn){
color:red;
}
}
<div :class="$style.myBlog__title">
<div class="x-btn"></div>
</div>
- 这个全局的css需要使用scss来进行开发，并使用严谨版的BEM，可以参考element-ui的命名规范。
