一、CSS编码规范
1、单行形式书写风格的排版约束
1.1）每一条规则的大括号 { 前后加空格
1.2）多个selector共用一个样式集，则多个selector必须写成多行形式
1.3）每一条规则结束的大括号 } 前加空格
1.4）属性名冒号之前不加空格，冒号之后加空格
1.5）每一个属性值后必须添加分号; 并且分号后空格
例如：
div.test { width: 100px; height: 200px; }
a:focus,
a:hover { position: relative; right: 1px; }
2、多行形式书写风格的排版约束
2.1）每一条规则的大括号 { 前添加空格
2.2）多个selector共用一个样式集，则多个selector必须写成多行形式
2.3）每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐
2.4）属性名冒号之前不加空格，冒号之后加空格
2.5）属性值之后添加分号;
3、其他规范
3.1）使用单引号，不允许使用双引号
3.2）如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后，并且属性名称要对齐，例如：
div.animation-demo {
-webkit-animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite;
-o-animation: mymove 5s infinite;
animation: mymove 5s infinite;
}
4、命名规则书写规范
4.1）规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _
4.2）命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
4.3）命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
4.4）不允许通过1、2、3等序号进行命名
4.5）避免class与id重名
4.6）id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
4.7）class用于标识某一个类型的对象，命名必须言简意赅。
4.8）尽可能提高代码模块的复用，样式尽量用组合的方式
4.9）规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。
4.10）除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置，例如：
div {
width: 200px;
font-size: 16px;
}
4.11）每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性。
5、属性编写顺序
5.1）显示属性display/list-style/position/float/clear
5.2）自身属性（盒模型）width/height/margin/padding/border
5.3）背景background
5.4）行高line-height
5.5）文本属性color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content
5.6）其他cursor/z-index/zoom
5.7）CSS3属性transform/transition/animation/box-shadow/border-radius
5.8）链接的样式请严格按照如下顺序添加：a:link -> a:visited -> a:hover -> a:active（LoVeHAte）
6、性能优化
6.1）选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。
6.2）注意选择器的性能，不要使用低性能的选择器，例如：
div > * {}
ul > li > a {}
body.profile ul.tabs.nav li a {}
6.3）禁止在css中使用*选择符。
6.4）除非必须，否则，一般有class或id的，不需要再写上元素对应的tag，例如：
div#test { width: 100px; }
6.5）0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px
6.6）如果是16进制表示颜色，则颜色取值应该大写。
6.7）如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC
6.8）如果没有边框时，不要写成border:0，应该写成border:none
6.9）尽量避免使用AlphaImageLoader
6.10）在保持代码解耦的前提下，尽量合并重复的样式。
6.11）background、font等可以缩写的属性，尽量使用缩写形式。
7、hack
IE6 * html selector { … }
IE7 *+html selector { … }
非IE6 html>body selector { … }
firefox @-moz-document url-prefix() { … }
safari3+/chrome @media screen and (-webkit-min-device-pixel-ratio:0) { … }
opera @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { … }
iPhone/mobile webkit @media screen and (max-device-width: 480px) { … }
8、z-index取值规范
9、其他
9.1）字体名称请映射成对应的英文名，例如：黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei)，如果字体名称中有空格，则必须加单引号。
9.2）背景图片请合理使用css sprites，按照模块、业务、页面来划分均可。制作css sprites时，尽量把颜色相近的图标放在一起，存储为png8格式，存储完以后还能用一些压缩工具进行无损压缩。
9.3）css背景图片的文件类型，请按照以下原则来保存：
9.3.1）如果背景图片有动画，则保存成gif
9.3.2）如果没有动画，也没有半透明效果，则保存成png-8
9.3.3）如果有半透明效果，则保存成png-24
9.4）不要在html中加入标签来清理浮动，通过在浮动元素的父元素上添加.clearfix来清除浮动。
9.5）为了SEO和页面可用性，请使用text-indent来隐藏文本内容。
9.6）避免过小的背景图片平铺。
9.7）尽量少用!important。
9.8）避免使用非一次性expression。
9.9）图片上的圆角、边框等可以用css样式完成的，不要用png图片上完成，图片尽量保存为jpg，且保证客户只上传方形图片即可达到显示效果。
二、前端开发时的注意事项
1、需求分析时需要考虑的方面
1.1）美工图大小和具体内容区域大小的区别
1.2）会不会有fixed定位
1.3）有没有返回顶部的功能需求
1.4）哪些地方需要注意超出隐藏
1.5）哪些地方需要内容撑开高度
1.6）哪些地方需要有链接跳转
1.7）hover（HTML5学堂提示：有些美工图会提供三态，初始、移入和按下）效果是什么样子
1.8）哪些地方需要加鼠标的小手状态
1.9）哪些有JS特效，需要考虑效果~
1.10）基本字体字号、颜色和背景颜色的选用
1.11）分清楚背景图和数据图
1.12）公共模块拆分出来
1.13）哪些地方是需要提交数据的 form
2、基本的前期准备
2.1）文件夹结构搭建
2.2）准备reset重置文件以及基本的几个JS文件，根据情况引入
2.3）合理修改reset文件[基于网站分析结果] 需要修改的内容如下：
2.3.1）基本的背景颜色和文字颜色
2.3.2）a标签的两种状态
2.3.3）基本的字体大小和样式设置
2.3.4）删除掉没有使用到的样式设置
2.3.5）保证after伪元素清浮动的方法在reset当中
3、移动端与PC端的特殊性
3.1）移动端
3.1.1）全新的选择器以及大部分的CSS3属性都得到了很好的支持
3.1.2）视口的设置
3.1.3）基本rem的处理
3.1.4）user-select；tap-highlight-color；-webkit-transform-style等样式的处理
3.1.5）需要额外注意“指触区”
3.1.6）模拟测试之外，需要进行真机调试
3.1.7）320屏幕像素下，字体大小最小为12px
3.1.8）a标签的title和img标签的title可以删除 嵌套原则可以适当的调整
3.1.9 最大最小宽的考虑
3.1.10）针对背景图进行background-size的处理
3.2）PC端
3.2.1）使用新标签后，对新标签的兼容处理
3.2.2）需要测试各个浏览器（HTML5学堂提示：保证在IE6~7的低端浏览器中，布局与功能正常）
3.2.3）对于子代选择器、CSS3新增选择器等能否使用取决于具体开发兼容要求
3.2.4）IE下的测试，需要启动服务器，即在wamp下运行
4、整体开发的基本顺序提醒
4.1）注意模块的最小宽度或者最大宽度
4.2）先完成一级布局与二级布局
4.3）针对公共模块进行开发
4.4）制作具体的模块
5、具体开发规范
5.1）文件名禁止使用中文命名
5.2）编写代码的时候，需要合理的缩进（不要出现空格与Tab格混用）与注释
5.3）遵循基本的嵌套规则
5.4）不要忘记a标签的href和title、img标签的alt、title、src，a标签的target（从何处打开链接）
5.5）CSS后代选择器，尽量不要超过3层，不要超过4层
5.6）类名采用单词（语义）命名，多个单词采用中划线连接
5.7）不设置不必要的属性和属性值，如针对占满父级整行的块元素设置width:100%
5.8）CSS样式按照顺序书写：显示属性——>自身属性——>文本——>其他——>CSS3属性
5.9）HTML与CSS中的引号需要保持一致，禁止出现单引号与双引号混用
5.10）类名和id名通常不重复的
5.11）每段语句结束后的分号（英文）必不可少
6、开发细节
6.1）注意保持盒模型大小的一致性（如：增加左右padding，原有width需要变小）
6.2）及时清除浮动，并采用合理的清除方式
6.3）针对定位元素，处理z-index值
6.4）数据图需要限制宽高
6.5）背景图需要进行合并
6.6）对于需要超出隐藏的需求，单行文本隐藏或显示为省略号（……），比如在模块标题需要进行设置，多行文本如果显示区域高度固定，需要设置超出隐藏。
6.7）img标签需要浮动或设置display:block，以防止img元素下的3像素空隙
6.8）a标签的指触区需要注意
6.9）合理使用群组和后代选择器
7、最后不可缺少的相关工作
7.1）CSS压缩
7.2）JS压缩
7.3）图片压缩
7.4）ico文件的制作
7.5）404页面
三、其它细节
1）为了解决标签的默认样式，需要引入css重置文件，如“reset.css”。
reset.css
@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
/*background: transparent;*/
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img { border:0;}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 {
font-size:200%;
font-weight:normal;
}
:focus { outline: 0;}
a{ text-decoration:none;}
a:hover img{ border:none;}
a:active{noOutline:expression(this.onFocus=this.blur());}
/*清除浮动*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/*png css hack for ie6*/
*html img.png{
_background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "http://i0.itc.cn/20101019/848_0a785a7b_1118_4825_85dc_e8696988c94b_0.gif");
}
2）HTML与CSS文件采用单词（语义）命名，禁止使用中文命名。
3）HTML标签嵌套合理。
4）单行文本显示为省略号（……），比如在模块标题需要进行设置，多行文本如果显示区域高度固定，需要设置超出隐藏。
5）保持盒模型大小的一致性（如：增加左右padding，原有width需要变小）
6）使用position的时候，按照CSS编码规范设置z-index的范围。
7）字体大小最小为12px，不能小于12px（部分浏览器不支持，以及不好的用户体验）
8）语义化标签：
不是说浏览器显示正常就可以，还得让搜索引擎等机器爬虫（机器人）能明白你代码中每个标签的用途，这就需要语义化你的代码。语义化的代码更容易被搜索引擎收录，更容易让屏幕阅读器读出网页内容。
HTML5 添加的语义元素如下：
标签 | 描述 |
<article> | 定义页面独立的内容区域。 |
<aside> | 定义页面的侧边栏内容。 |
<bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
<details> | 用于描述文档或文档某个部分的细节 |
<dialog> | 定义对话框，比如提示框 |
<summary> | 标签包含 details 元素的标题 |
<figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
<figcaption> | 定义 <figure> 元素的标题 |
<footer> | 定义 section 或 document 的页脚。 |
<header> | 定义了文档的头部区域 |
<mark> | 定义带有记号的文本。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分。 |
<progress> | 定义任何类型的任务的进度。 |
<ruby> | 定义 ruby 注释（中文注音或字符）。 |
<rt> | 定义字符（中文注音或字符）的解释或发音。 |
<rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> | 定义文档中的节（section、区段）。 |
<time> | 定义日期或时间。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
四、如何优化前端页面/如何优化网页
1、前期准备
1.1）首页命名为index.html / index.htm / index.php等。
1.2）需要制作404页面。
1.3）文件夹结构合理。
1.4）命名使用英文且有语义性的单词，并提供参考文档。
2、结构
2.1）文件头部分。
2.1.1）需要提供文档声明。
2.1.2）设置utf-8的编码格式，并放置于title之上。
2.1.3）合理的填写html文件中的title、meta等内容。
2.1.4）使用外部引入样式表和JS行为代码，实现结构、样式和行为的相分离，降低模块间的耦合度。
2.1.5）合理控制JS文件的引入位置，提升网站的加载速度。
2.1.6）根据具体情况合并CSS、JS文件，降低服务器请求次数。
2.2）标签选用与书写规范
2.2.1）书写HTML代码的时候，遵循标签语义化的要求，根据标签的语义性进行选择，如布局使用div、标题使用h系列标签、段落使用p标签等。
2.2.2）HTML代码要合理嵌套，一般情况下，行元素当中不能包含块元素，除了段落、标题类型的块元素当中，既能够包含块元素，也能够包含行元素，而段落或标题类的块元素只能够包含文字或行元素。table元素只能够直接包含thead、tbody、tfoot、caption等元素；ul/ol元素只能直接包含li元素；dl元素当中只能直接包含dt和dd元素；form表单当中只能直接包含filedset和legend，不能直接包含input元素。
2.2.3）合理书写注释，代码缩进合理，不出现多余空行或者空标签，提升代码可读性。
2.2.4）权衡嵌套层级以及扩展性等多个方面后，在适当位置使用三层嵌套技术。
2.2.5）合理书写a标签的title、img标签的title和alt，提升网站的SEO。
3、样式
3.1）基本代码规范
3.1.1）CSS规则命名中，一律采用小写加中划线的方式，不使用下划线或大写字母，命名采用更简明有语义的英文单词进行组合，进行合理的缩写。
3.1.2）CSS代码的书写顺序遵循CSS样式的渲染顺序：显示属性-自身属性-文本属性-其他。
3.1.3）避免class与id重名，对于class名使用中划线，而id名遵循小驼峰命名法。
3.1.4）在书写网页样式之前，先进行浏览器默认样式重置。
3.2）兼容问题处理
3.2.1）在CSS代码当中，尽量的规避掉不同浏览器的兼容问题，如果实在避免不了，也需要进行合理解决。
3.2.2）尽可能的少使用hack。
3.2.3）对于CSS3部分属性，如果需要兼容各个浏览器，需要书写各个浏览器前缀。
3.3）其他样式处理
3.3.1）合理使用样式的“继承”（CSS后代选择器），或者使用样式的“组合”，减少页面中的类名，提升通用性。
3.3.2）合理使用群组选择器，进行代码的优化。
3.3.3）图片需要设置大小，防止后台传送不正常尺寸图像造成的失真。
3.3.4）对于数据类部分，在适当的地方增加超出隐藏或者超出显示为省略号。
3.3.5）需要考虑a标签的点击区，通常会对a进行处理：转化为块元素并设置高度，或者浮动设置宽高。
3.3.6）合理利用元素的默认样式，而不再进行冗余设置（如div等元素的宽度默认为占满父级，就不需要再设置width:100%，对于高度，默认由内容撑开，也不需要设置高度）。
3.3.7）考虑文档流的变化，对元素进行浮动之后，需要进行及时的清除，采用after伪元素清浮动的方法进行清除。
3.3.8）对盒模型设置时，子级的margin（顶部）通常会影响父级样式，因此，在父子之间的间距使用父级的内边距撑开，兄弟级别标签之间的距离可采用外边距。
4、JS方面
4.1）变量
4.1.1）合理命名，遵循基本的命名规范，并遵循命名推荐：属性/变量以名词开头，方法/函数以动词开头，遵循小驼峰，构造函数使用大驼峰，常量所有字母均大写。
4.1.2）所有变量声明都放在函数的头部。
4.1.3）所有函数都在使用之前定义。
4.1.4）尽量避免使用全局变量，防止全局作用域被污染。
4.1.5）合理书写大括号位置、空行位置、注释等内容，对于声明变量，可以如下声明：
var box = document.getElementById('box'),
con = document.getElementById('con');
4.1.6）利用对象命名空间、匿名函数、协同命名等方法，尽量避免团队合作时产生的命名冲突。
4.1.7）文件加载完毕之后再进行代码的执行，合理利用window.onload与jQuery中的$(document).ready。
4.1.8）对于DOM操作，尽可能减少在页面中查找元素的次数，即用变量存储查找的元素，之后再需使用，只需要使用变量即可（for循环中常见的长度控制，同理）。
4.2）数据类型
4.2.1）比较数据时，不要使用"相等"（==）运算符，只使用"严格相等"（===）运算符。
4.2.2）不要使用隐式的数据类型转换。
4.2.3）追加字符串时，采用 str += "独行冰海"; 而不是str = str + "独行冰海";
4.3）页面基本数据交互
4.3.1）获取标签使用最为快捷的方法，在PC端原生方法当中，速度比较如下：通过id > 通过类名 > 通过标签名。如果能够在小范围中进行查找时则缩小范围。
4.3.2）对于样式的修改与调整，根据具体情况采用style或者类名操作（className），防止style的滥用造成的css文件hover失效。
4.3.3）原生当中，一个元素一种事件只能绑定一次。
4.3.4）可以通过事件委托，减少页面中类似事件的数量。
4.3.5）在删除dom节点之前，需要先移除掉该节点上的事件。
4.4）性能
4.4.1）对于功能类似的代码，进行函数的封装，可以使用面向对象的书写方法，提升代码的复用性和扩展性。
4.4.2）尽可能少使用with语句、闭包、eval语句。
4.4.3）在DOM节点相关操作上进行优化，如利用变量存储查找到的元素，从而防止每次查找时进行页面重绘、利用文档碎片等。
4.4.4）尽可能减少页面中dom元素样式的修改，防止页面回流与重绘。
4.4.5）合理使用计时器，防止setInterval造成的内存泄露。
4.4.6）在设置计时器之后需要考虑计时器的清除，以防止计时器的叠加造成的影响。
4.5）AJAX
4.5.1）对于AJAX的异步加载，提供加载的相关提醒。
4.5.2）防止AJAX造成的重复请求。
4.5.3）利用时间戳进行缓存的处理。
4.5.4）对AJAX进行缓存处理。
4.5.5）合理使用AJAX中发送数据的方法，当文档中允许使用post或get发送时，优选选用get方法。
4.6）框架
4.6.1）jQuery等插件的合理引用，处理常见的浏览器兼容问题。
4.6.2）根进jQuery的发展，及时更新文件库，舍弃已经淘汰的方法（如：.toggle()，.live()等）。
5）图像方面
5.1）使用背景图合并技术，将多张背景图合并到一张图片上，从而降低页面与服务器之间的请求次数。
5.2）存储图像时根据需求采取不同的格式，对于不需要透明的图像可以存储为jpg，需要半透明图像存储为png，对于全透明且像素要求不高的图像可以存储为gif或png-8。对图像质量进行控制，保证在显示效果正常的前提下，存储为尽可能小的图像，对于含透明的图像，需要根据具体显示质量而选择。
5.3）对于网页中特殊的字体，可以使用@font-face进行设置，并根据实际情况修改字体包，防止字体包文件过大。具体设置方法此处不讲解了，可以参见文章《网络字体@font-face 如何处理网页中的特殊字体》。
5.4）合理使用图片预加载和图片懒加载。
6）上线准备
6.1）在上线之前对html、css、js文件进行压缩。
6.2）增加网页图标 ico文件，具体增加方法此处也不讲解了，可详见《设置网页地址栏前面的标志图标》。
五、相关概念
1、什么是 HTML？
HTML（超文本标记语言HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。
什么是HTML5？
狭义上的HTML5：HTML4.0的升级版本；HTML5+CSS3+新增JS API；W3C制定的关于HTML技术约定的新规范。
广义上的HTML5：HTML5行业的代名词；行业的技术标准；当前新技术的代名词。
HTML5技术概括：新增标签以及属性；CSS3的新特性；Canvas绘图；JavaScript的新增API（如重力感应、HTML5视音频等）；移动端。
2、什么是 CSS？
CSS 指层叠样式表 (Cascading Style Sheets)。
含义：样式定义如何显示 HTML 元素；样式通常存储在样式表中；多个样式定义可层叠为一个。
优点：把样式添加到 HTML中，是为了解决内容与表现分离的问题；外部样式表通常存储在 CSS 文件中，可以极大提高工作效率。
3、什么是JS？
Javascript（JS）是一种脚本语言，主要用于Web。它用于增强HTML页面，通常可以嵌入HTML代码中。JavaScript是一种解释型语言。因此，它不需要编译。
联系客服
