整 理：肖雅君、徐秀 时 间：2015-10-23 说 明：公司前端需遵守的项目规范 目录 第一节、 文档目录结构 第二节、 HTML书写规范 1、 声明和头部 2、 标签属性 第三节、 CSS书写规范 1、 外部引用样式 2、 格式化标签的默认样式： 3、 CSS书写规范 4、 CSS样式规范 第四节、 图像处理 1、 图像压缩 2、 图片格式 3、 Sprite雪碧图 第五节、 通用 1、 编码格式UTF-8 2、 书写小写 3、 去掉多余空格 4、 加注释 5、 特殊符号 6、 内部js代码的位置 附录： 参考链接： 第一节 、文档目录结构 |-- 前端项目名 |-- index.html /*存储HTML文件以及PHP文件*/ |-- styles |-- images /*存储样式引入的图片，如公共图片*/ |-- style.css /*存储CSS样式文件，默认初始命名为style.css*/ |-- js /*存储js文件*/ |-- images /*存储<img>标签所用图片，一般为数据调取的图片*/ |-- global /*放置公共引用的模块，如多个页面引用的header和footer部分*/ 第二节、HTML书写规范 1、声明和头部 1.1 PC端固定头部（公司统一）（见附录） 1.2 WAP端固定头部（公司统一）（见附录） 2、标签属性 2.1 缩进与换行 设置 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符与空格的混合。 2.2 闭合标签 所以的标签都必须闭合。非成对标记必须以“/>”结尾，且“/”前必须有一个空格，如<img />、<input />、<br />等。 2.3 标签语义化 如：<h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，有利于搜索引擎的查询。 2.4 标签简洁化 标签的嵌套应尽量简洁，减少嵌套层次，减少不必要的的标签。 如：<!-- good --> <img class="avatar" src="image.png" /> <!-- bad --> <span class="avatar"> <img src="image.png"> </span> 2.5 类名或id名命名规则 （1）类名或id名命名要在保证通俗易懂的前提下尽量简洁。（2）同一页面内，禁止使用相同的 name 与 id 2.6 连字符 id、class 命名必须单词全字母小写，class 命名单词间以“中划线”分隔；id 命名多个单词使用“下划线”连接。如<div class="goods-list"></div>。 2.7 布尔类型的属性 布尔类型的属性，不添加属性。如：<input type="text" disabled /> 第三节、CSS书写规范 1、外部引用样式 所有的样式文件都写到css文件中，使用<link rel="stylesheet" href="styles/style.css" />引入到页面中。优先使用“外部样式表”，不建议使用内嵌样式，实际情况按后端需求。 2、格式化标签的默认样式： 2.1 PC端格式化样式（见附录） 2.2 WAP端格式化样式（见附录） 3、CSS项目书写规范 3.1 简洁型书写格式 实际项目中需压缩CSS样式，所以使用样式属性单行书写的格式，且去除多余空格。 样式紧接着选择器写，样式之间不能有空格，同一选择器的样式不换行。
3.2 写上父级类名 禁止使用*选择符。嵌套的类名很多的时候，需把父级也写上，当超过5个类名时可省略父级：如下 4、CSS样式规范 4.1 简化CSS属性 如font、margin、padding、border等。 <!-- bad --> border-left:0;border-top:5px;border-right:0;border-bottom:5px; <!--good --> border:0 5px; 4.2 0和单位 （1）0后省略单位，非0数值必须加上单位。如：width:5px;height:0; （2）属性值出现小数点忽略0，如：font-size:.8em; 4.3 a标签 a标签伪类书写要严格按照a:link，a:visited，a:hover，a:active的顺序，否则在某些浏览器中会失效。 4.4 简写颜色 如果不是为了制作半透明效果，颜色值必须使用十六进制记号形式 #rrggbb，颜色能简写的要简写，且颜色值使用小写字母。如：用{color:#f00;}代替{color#red;}和{color：#ff0000;}。 4.5 清浮动 在html中添加类名“.clearfix”，样式文件中添加代码 如：html中<div class="wrapper clearfix"></div> CSS样式：
第四节、图像处理 1、图像压缩 所有图片必须经过一定的压缩和优化才能发布(压缩软件：PNGGauntlet可压缩PNG图片)。 2、图片格式 用png图片做图片时, 要求图片格式为png-24格式,用png-8为ie6单独定义背景。WAP端默认用png-24。 3、Sprite雪碧图 能用雪碧图的尽量做成雪碧图（CSS Sprite是一种将数个图片合成为一张大图的技术，既可以是背景图也可以是前景图）。在一个位置统一调用背景图片，然后通过偏移background-position来进行图像位置选取； 使用url()时忽略括号中的""。如：
第五节、通用 1、编码格式UTF-8 不管是HTML还是CSS文件，都统一采用UTF-8编码格式 2、书写小写 所有的html代码、CSS代码、颜色值等必须要用小写。 3、去掉多余空格 不管是html文件还是CSS文件，都不要有多余的空格。（sublime有插件能显示并一键删除所有多余空格：trailing Spaces）
