关于css代码的编写规范（2020版）

这是个人偏好，可以参考。丑陋的秩序也比无秩序更好

1. 使用简化的BEM版本
   block__element
   block__class

.my_setting{
  &__add_btn{
    color:blue;
  }
}

.my{
    &__add_btn{
    color:red;
  }
}

2. 命名风格：模块用连接线，下一级为驼峰
   first_name_state
   例子：

.save_btn{
  &_default{
    color:black;
  }
  &:hover{
    background:#fafafa;
  }
  &_actived{}
}

.x_btn{
  &_primary{
  }
}

--->css

.save_btn_default{
  //...
}
//....

3. 使用css module 进行模块化，不建议使用vue自带的scope
   因为需要模块化的场景都是spa，而现在的spa往往使用react或vue，官网就有教程。如果你的开发环境是jquery等系统，那就比较麻烦。目前我的选择是：简单网页用jquery，复杂spa用vue，所以也没考虑这种情况的解决方法。
4. spa中往往需要一个通用的css，里面的样式是通用的，可以直接拿来用，但具体模块的开发人员不能修改。如果真的需要修改，应当使用css module里的global关键字嵌套到具体模块中

.myBlog__title{
    :global(.x-btn){
      color:red;
    }
}

<div :class="$style.myBlog__title">
<div class="x-btn"></div>
</div>

5. 这个全局的css需要使用scss来进行开发，并使用严谨版的BEM，可以参考element-ui的命名规范。