统一的代码规范于项目而言百利而无一害。
架构师无法要求大家代码效率和质量一样，但是可以要求大家代码风格和规范一样。
本篇文章主要讲CSS的相关规范
命名规范（kebab-case）
常见的有三种命名方式：
kebab-case: 单词首字母小写，中间用短横线连接。
snake_case: 单词首字母小写，中间用下划线连接。
BEM: 块，元素，修饰符命名
很早很早的bootstrap框架开始就是使用kebab-case命名的，kebab-case更匹配css原生属性名，例如font-size,border-color,padding-top，kebab-case命名就会和它们产生一致性，更好看，所以也是我推荐和习惯的CSS命名方式。
也会有团队推荐一种BEM命名方法，例如block__card，block__card--small这种就是BEM命名，__双下划线代表相关联的标识，块下面的卡片，而--中双横线则代表一个修饰，卡片是什么类型的。还有很多其他的规则，不一一说明，有兴趣可以自行研究，也是很好的一种方式，会很清晰，只是我嫌弃它太冗长不清爽。
snake-case这也是一种常见命名方式，和kebab-case区别就是中横线变成了下划线，例如：card_header,card_footer,card_form，因为JS中我很多地方会用到下划线命名所以我不使用这种方式。
一些额外补充：
kebab翻译中文是烤肉串，是很形象的一种比喻：card-head-left-btns-text，名字就像被一根签子串起来的烤肉。而snake就是蛇，card_head_left_btns_text，就像爬在地上的一串小蛇，也很形象。
说到底，这东西不强迫大家，遇到一些犟种前端，他爱怎么命名就怎么命名，我也不会去逼迫他非得按照我的规则来命名，毕竟CSS对于一个项目来说，极少存在复杂的逻辑，而且现在的UI框架都很成熟，加上预编译语言，样式是很容易控制和阅读的。
建议示范:
.card-header{}
.card-body{}
.card-footer{}
不建议示范:
.cardHeader{}
.cardbody{}
.CardFooter{}
为什么不建议使用大驼峰小驼峰命名，第一是用在css里很丑，当然了犟种前端会说，不丑啊，我觉得挺好看啊，我还觉得你那个什么卡八步Kiss(cabab case)丑呢！反正我不要你觉得，我要我觉得，我觉得驼峰命名css名很丑。第二是很多js，ts等文件里面常用到大驼峰小驼峰命名，这也能起到一个区分的作用，当你全局搜索一些驼峰命名的东西时，不用筛除css文件。当然了犟种前端会说，筛除了不是搜索更快吗！其实犟是蛮可爱的，就是不能两个人都犟，那就是灾难了。
使用CSS拓展语言时避免嵌套超过四层
虽然只是css，但是多层嵌套的任何代码都不易读，也不优雅。
优雅示范:
.card{
.card-header {
.title{}
.sub-title{}
}
}
粗俗示范:
.card{
.card-header {
div {
p {
span {
.text{}
.icon{}
}
}
}
}
}
在style标签里必须使用scoped
避免全局污染，导致样式冲突和覆盖。
正确示范:
错误示范:
这个东西哪怕是犟种前端也必须要求，因为全局污染样式是一件非常恶心的事情，而且会存在平台展现不一致的问题。如果不去要求，就会出现css文件满是!important，这个东西虽好，但是它耗性能不优雅。记住！优雅的代码是程序员毕生的追求
封装全局样式变量且必须使用
封装全局样式变量是必须的，因为后面如果需要统一调整颜色字体大小等样式时，大家各写各的就会变成需要修改无数的文件。而且调整UI是一件必然会发生的事情。
正确示范:
.title {
color: $color-title;
font-size: $size-title;
}
不优雅示范:
.title {
color: #333
font-size: 18px;
}
参考https://www.jianshu.com/writer#/notebooks/53308068/notes/107256285
一些CSS的小技巧和注意事项：
会在JS中使用的类或者ID使用js-作为前缀
遇到一些犟种要改样式名的时候，你可以和他说带js-的不能改哈，有很多js文件用到了，他多少会听一嘴的。
- 例如
.js-form{}
.js-nav-title{}
.js-close-btn{}
#js-back-btn{}
不要用0px，0em，0%等，统一用0表示。
- 例如
p {
padding: 0;
margin: 0;
}
注释分块做明显间隔，更方便阅读查找。
- 例如
/* 卡片 */
/* *********************************************************************** */
.card {
……
}
/* 详情信息盒子 */
/* *********************************************************************** */
.detail-box {
……
}
按序写样式，这个不强迫，不过因为css文档流定位和布局是第一要素，像字体颜色这些不影响布局，所以往后放。
- 依次写
布局类属性 position / top / right / bottom / left / float / display / overflow 等
盒模型属性 border / margin / padding / width / height 等
文本类属性 font / line-height / text-align / word-wrap 等
修饰类属性 background / color / transition / list-style 等
.card {
position: absolute;
left: 0;
top: 0;
border: 1px solid #ddd;
padding: 10px;
font-size: 14px;
background: #f1f1f1;
color: #666;
}
CSS命名尽量用英文单词
- 参考单词
header页眉body页身footer页脚
container集装箱aside侧边栏main主体submain副主体
left左侧center中间right右侧
top上部middle中部bottom底部
group分组row行col列list组
max最大plus超大medium中等small小mini极小
primary主要的success成功的warning警告的danger危险的default默认的
info信息text文本link链接tips小贴条
active活跃的disabled禁用的readonly只读的highlight高亮的
height高width宽weight粗
写在最后：也许有不准确的地方或者不完善的地方，大家如果有更好的和准确的资料，可以多多提供，一起交流。本人不是犟种，擅长听取不同意见，兼容不同类型的人。