【修真院前端小课堂】

开发过程中应该遵守哪些编码规范和class命名规范？

开场语：

大家好，我是IT修真院广州分院第1期的学员王熠华，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网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）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~