一、背景介绍

为什么要遵守编码规范？

1、好的编码规范可以尽可能的减少一个软件的维护成本，并且几乎没有任何一个软件，在其整个生命周期中，均由最初的开发人员来维护；

2、好的编码规范可以改善软件的可读性，可以让开发人员尽快而彻底地理解新的代码；

3、好的编码规范可以最大限度的提高团队开发的合作效率；

4、长期的规范性编码还可以让开发人员养成好的编码习惯，甚至锻炼出更加严谨的思维。

二、知识剖析

基本准则

符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。

html规范

1、页面的第一行添加标准模式声明

2、代码缩进：tab键设置四个空格(通常在软件右下角设置相应空格大小)

3、html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写

4、建议为html根元素指定lang属性，从而为文档设置正确的语言lang="zh-CN"

5、不同doctype在不同浏览器下会触发不同的渲染模式< meta http-equiv="X-UA-Compatible" content="IE=Edge">

6、非特殊情况下样式文件必须外链至< head >...< /head>之间;非特殊情况下JavaScript文件必须外链至页面底部

7、尽可能减少div嵌套

8、在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中

9、对于属性的定义，确保全部使用双引号，绝不要使用单引号

10、背景图片请尽可能使用sprite技术,减小http请求

11、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能

12、不要使用@import,与标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。

CSS规范

排版规范

1、如果是在html中写内联的css，则必须写成单行

2、每一条规则的大括号{前后加空格

3、属性名冒号之前不加空格，冒号之后加空格

4、每一个属性值后必须添加分号，并且分号后加空格

5、多个selector共用一个样式集，则多个selector必须写成多行形式

class命名

1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_

2、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

3、不允许通过1、2、3等序号进行命名；避免class与id重名

4、class用于标识某一个类型的对象，命名必须言简意赅

5、尽可能提高代码模块的复用，样式尽量用组合的方式

6、规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名

CSS书写规范

1CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

2去掉小数点前的“0”

3、简写命名——很多用户都喜欢简写类名，但前提是要让人看懂你的命名。

4、16进制颜色代码缩写——有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。

5、长名称或词组可以使用中横线来为选择器命名。

6、不要随意使用Id——id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

三、常见问题

属性的声明应该按照什么顺序？

四、解决方案

相关的属性声明应该以下面的顺序分组处理：

1、Positioning位置属性(position, top, right, z-index, display, float等)

2、Box model盒模型 (width,height,padding,margin)

3、Typographic排版(font,line-height,letter-spacing,color,text-align等)

4、Visual外观(background,border等)

Positioning处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。

其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。

五、编码实战

六、扩展思考

问题:下面四种写法哪个渲染速度最快？

#test .test{}

ul.test{}

#test ul{}

.test{}

“如果单纯的ul与.test PK，我还真拿不定谁的渲染速度更快些。但是，一旦牵扯到层级与标签，我100%确定，.test这种最直接的命名方式渲染效率是最高的。”

“CSS的渲染方式是“从右往左”渲染的，就拿#test ul{}举例，先渲染页面上所有的ul标签，再去寻找id为test的元素。因此上面这个问题，先渲染页面上所有的div，再去寻找其老爸有没有id为test的元素。"

所以，CSS命名，只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销也就越大，这就是为什么一些前辈的文章会建议要尽量避免过深的层级。

七、更多讨论

讨论点一：在上面的问题中，如果是使用JavaScript获取DOM元素，那么哪种写法速度最快？

讨论点二：css命名在什么情况下必须用到层级？

讨论点三：如何减少css的声明？

八、参考文献

参考三：编码规范