开发过程中应该遵守哪些编码规范和class命名规范？
这里是修真院前端小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能。
本篇分享的是：开发过程中应该遵守哪些编码规范和class命名规范？
开场语：
大家好，我是IT修真院广州分院前端王熠华，一枚正直纯洁善良的前端程序员。
今天给大家分享一下，修真院CSS任务12，深度思考中的知识点：
开发过程中应该遵守哪些编码规范和class命名规范？
（1）背景介绍：
你是否常常碰到以下问题：你总是看不懂他写的代码，或者读起来很吃力；
你需要改他的代码却无从下手，或总是要去问他这里是什么改了会不会影响其他代码；
你和他一起开发一个产品，你总是怕代码和他有冲突或互相影响；
你的代码在多次维护任务之后变得越来越臃肿，越来越难以维护。
解决以上问题只需一种方法——读我们的规范！
（2）知识剖析：
2.1.HTML规范 - 整体结构
2.2.CSS规范 - 分类方法
2.3.CSS规范 - 命名规则
2.4.CSS规范 - 代码格式
2.5.CSS规范 - 统一语义理解和命名
（3）常见问题：
.g-xxx .class{}
不要在页面布局中使用后代选择器，因为这个后代选择器可能会污染里面的元素。
.m-xxx div{}
不要以没有语义的标签作为选择器，这会造成大面积污染，除非你可以断定现在或将来你的这个选择器不会污染其他同类。
（4）解决方案：
同上
（5）编码实战：
详情见视频
（6）拓展思考：
除了这种规范还有其他规范的吗？
（7）参考文献：
参考：NEC 更好的CSS方案
（8）更多讨论：
Q1：哪种规范更好；
A1：没有统一答案，依据不同公司的要求来书写；
Q2：nec的css顺序是怎么写的；
A2：例：按照以下顺序；
/* 重置 */
div,p,ul,ol,li{margin:0;padding:0;}
/* 默认 */
strong,em{font-style:normal;font-weight:bold;}
/* 统一调用背景图 */
.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}
/* 统一清除浮动 */
.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}
.g-bdc,.m-dimg ul,.u-tab{zoom:1;}
/* 布局 */
.g-sd{float:left;width:300px;}
/* 模块 */
.m-logo{width:200px;height:50px;}
/* 元件 */
.u-btn{height:20px;border:1px solid #333;}
/* 功能 */
.f-tac{text-align:center;}
/* 皮肤 */
.s-fc,a.s-fc:hover{color:#fff;}
Q3：原子类名命的优劣
A3：缺点:代码冗余；维护困难；控制困难；
优点
1，便于抽出复用代码，提高代码复用程度。clearfix 类就是最好的一个例子，将一段用来清除浮动的 CSS 编写成 clearfix 类，在需要清除浮动的 元素 中，增加这个类就可以。类似的还有其他使用场景。
2，CSS 框架的应用。很多前端框架的 CSS 部分，特别是网格系统，都是原子类的具体应用。
（9）鸣谢：
感谢孟晨师兄，此教程是在他之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
--------------------------------------------------------------------------------------------------------------------------------------------------------
“我们相信人人都可以成为一个工程师，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。