前端代码风格规范

规范目的：为了提高工作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端架构。

规范基本准则：符合web标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良。页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。

一、文件规范

1.1 HTML部分

　　1.1.1 建包问题

　　　　文件均归档至约定的目录中，建包格式如下：

　　　　img

　　　　注意：所有的css文件放在css文件夹中，image放在images文件夹中，js放在js文件夹中

　　1.1.2 HTML头部编写

　　　　(1) 编码：所有编码均采用xhtml/html，标签必须闭合，编码统一为UTF-8，在多语言的网站建议添加<html lang="zh-CN">，说明内容是以中文显示和阅读为基础的

　　　　(2) 语义化：正确使用标签，充分利用无兼容性问题的html自身标签

　　　　(3) 文件头部head内容：

　　　　　　• title: 需要添加标题

　　　　　　• 编码: charset=UTF-8

　　　　　　• meta: 可以添加description、keywords内容

1.2 CSS部分

　　1.2.1 CSS种类及其命名

　　　　可以将CSS样式表分为三类：全局样式表、模块通用样式表和独立样式表

　　　　　　• 全局样式表常用命名：public.css

　　　　　　• 模块通用样式表命名：模块名_basic.css

　　　　　　• 独立样式表：模块名_页面名.css

　　1.2.2 CSS引入

　　　　CSS文件引入可通过外联或者内联方式引入

　　• 外联方式

　　• 内联方式

　　　　img

　　　　注意：link和style标签都应该放入head中，原则上，不允许在html上直接写样式。避免在CSS中使用@import，嵌套不要超过一层。

二、注释规范

2.1 顶部文档注释（推荐使用）

1 /*
2 * @description: 中文说明
3 * @author: name
4 * @update: name(xxxx-xx-xx xx:xx)
5 */

2.2 属性注释

1 /*Header*/
2 /*Nav*/
3 /*Container*/
4 ...
5 /*Footer*/

2.3 功能模块注释

1 /* module: module1 by 小王 */
2 ...
3 /* module: module2 by 小李 */

2.4 特殊注释

复制代码

 1 /*Color codes
 2 --------------------------------
 3     Red: #e03d3d;
 4     Dark: #424242;
 5     Light: #c3c5c0;
 6     blue #e03d3d;
 7 */
 8 
 9 /*
10    默认宽度为1128px 
11 */
12 
13 /*@group Reset Css*/
14 /*@group General Definitions*/
15 
16 /*---------------Typography-----------------*/
17 /*------------------Sprite--------------------*/

复制代码

img

　　注意：

　　　　• 每一个文档对应一个文档注释（主要注释内容包括：文档创建人、创建时间、主要内容描述等）

　　　　• 属性注释说明：可以分CSS属性来进行命名（如：margin/padding值、CSS Hack、全局Hover等）

　　　　• 功能模块注释说明：分模块来编写CSS样式（如：头部、导航、按钮、页脚等等）

三、命名规范

3.1 如何命名

　　• css最好用class来命名，js用id来命名，已做区分

　　• id和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名

3.2 命名示例

3.3 命名精简

　　id和class命名越精简越好，只要足够表达意思，这样有助于理解，同时也能提高代码效率

3.4 命名嵌套问题

　　书写css要注意先后顺序和嵌套问题，从性能上考虑尽量减少选择器的层级

3.5 注意事项

四、书写规范

4.1 排版规范

　　书写风格：

4.2 属性编写顺序（一般遵循显示属性 -> 自身属性 -> 文本属性 -> 其他属性的书写格式）

　　img

4.3 代码性能优化

4.4 CSS Hack的使用

　　尽量少使用浏览器检测和CSS Hacks，先试试别的解决办法。考虑到代码高效率和易管理，虽然这两种办法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，所以尽量少用

4.5 IE兼容性

　　IE支持通过特定的标签来确定绘制当前页面所应该采用的IE版本，除非有强烈的特殊需求，否则最好是设置edge mode，从而通知IE采用其所支持的最新的模式

　　　　 　　　　

　　注意：X-UA-Compatible这个是IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式

　　　　   中的chrome=1效果是如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染

4.6 字体规则

　　img

五、其他规范

六、 自适应页面布局（响应式布局，暂不考虑低版本IE兼容性）

6.1 布局细节

　　　　 　　　　

6.2 CSS3引入的Media Query模块，可自动探测屏幕宽度

七、帮助文档

7.1 全局样式写法（reset css）

img

7.2 清浮动

　　需要清除浮动的地方有：

　　解决办法（四种方法）

　　　　.clearfix{zoom:1;} / 针对IE7 hack，触发IE7的haslayout，以清除浮动 */ 　　　　.clearfix:before,.clearfix:after{display:table;content:”“;line-height:0;} 　　　　.clearfix:after{clear:both;}

7.3 各大网站的字体样式：

　　默认字体样式：

7.4 文本多行显示添加省略号（文本溢出省略）

　　给需要的标签添加具体宽度限制、white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

7.5 input框的具体样式

　　input框行高问题，一般不需要写line-height，但是在IE8/IE7需要写hack