慢慢积累
通用样式规范
省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。
<!-- 不推荐 --> <script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- 推荐 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> /* 不推荐 */ .example { background: url("https://www.google.com/images/example"); } /* 推荐 */ .example { background: url("//www.google.com/images/example"); }
缩进
一次缩进2个空格，不要使用 tab 或者混合 tab 和空格的缩进。
HTML和CSS都一样。
大小写
以下都应该用小写：HTML 元素名称，属性，属性值（除非 text/CDATA），CSS 选择器，属性，属性值。
结尾空格
<!-- 不推荐 --> <p>What?_ <!-- 推荐 --> <p>Yes please.
通用元规范
编码
在 HTML 中通过 <meta charset="utf-8"> 指定编码方式，CSS 中不需要指定，因为默认是 UTF-8。
注释
使用注释来解释代码：包含的模块，功能以及优点。
任务项
用 TODO 来标记待办事项，而不是用一些其他的标记，像 @@。
<!-- TODO: remove optional tags --> <ul> <li>Apples</li> <li>Oranges</li> </ul>
文档类型
HTML 文档应使用 HTML5 的文档类型：<!DOCTYPE html>。
孤立标签无需封闭自身，<br> 不要写成 <br />。
HTML 正确性
尽可能使用正确的 HTML。
<!-- 不推荐 --> <title>Test</title> <article>This is only a test.
<!-- 推荐 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
语义化
<!-- 不推荐 --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推荐 --> <a href="recommendations/">All recommendations</a>
多媒体元素降级
对于像图片、视频、canvas 动画等多媒体元素，确保提供其他可访问的内容。图片可以使用替代文本（alt），视频和音频可以使用文字版本。
<!-- 不推荐 --> <img src="spreadsheet.png"> <!-- 推荐 --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
关注分离
标记、样式和脚本分离，确保相互耦合最小化。
实体引用
如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用，如 —， ”，☺，除了一些在 HTML 中有特殊含义的字符（如 < 和 &）以及不可见的字符（如空格）。
<!-- 不推荐 --> The currency symbol for the Euro is “&eur;”. <!-- 推荐 --> The currency symbol for the Euro is “€”.
type 属性
在引用样式表和脚本时，不要指定 type 属性，除非不是 CSS 或 JavaScript。
因为 HTML5 中已经默认指定样式变的 type 是 text/css，脚本的type 是 text/javascript。
<!-- 不推荐 --> <link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"> <!-- 推荐 --> <link rel="stylesheet" href="//www.google.com/css/maia.css"> <!-- 不推荐 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script> <!-- 推荐 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
HTML 引号
属性值用双引号。
<!-- 不推荐 --> <a class='maia-button maia-button-secondary'>Sign in</a> <!-- 推荐 --> <a class="maia-button maia-button-secondary">Sign in</a>
20170311
项目结构
项目命名规范
项目：用项目对应的英文单词命名
文件及文件夹:
-
全部英文小写字母，可以使用中线，不可出现其他字符，如login,my-order
-
调用 `/lib`里面的文件需包含版本号，压缩文件需包含`min`关键词，其他插件则可不包含，如：`/lib/jquery.1.9.1.js`
格式&编码
-
文本文件： `.xxx` UTF-8_(无BOM)_ 编码
-
图片文件： `.png` _(PNG-24)_ `.jpg` _(压缩率8-12)_
-
动态图片： `.gif`
-
压缩文件： `.tar.gz` `.zip``.rar`
标签使用规范
尽量减少标签层级
双标签必须闭合，单标签用斜线闭合
HTML第一行统一使用HTML5标准<!DOCTYPE html>
一律统一标签结尾斜杠的书写形式：`<br />` `<hr />` 注意之间空格
避免使用已过时标签，如：`<font>` `<frame>` `<s>`
`<img>`标签默认缺省格式：`<img src="#" alt="缺省时文字" />`
`<a>`标签缺省格式：`<a href="#" title="链接名称">xxx</>` 注：`target="_blank"` 根据需求决定
style、link、script可省略type属性，因为 text/css 和 text/javascript 分别是他们的默认值
HTML注释
<!--内容-->
<div class="content"> <p>content</p>
</div>
注意事项
手机端的自适应布局尽量采用弹性布局，而不是百分比
`css`文件都 置于头部
HTML换行缩进：采用 tab空格
其他效果`js`及`统计代码` 文件置于尾部
手机端的页面都按750px来做，显示效果按375px
图片规范
图片大小：切图时使用web格式保存，减小图片大小
图片尺寸：一律采用整数，如20X20，50X50
图片合并：小图片一律要合并，并保存对应的psd文件，以便后期修改