开发规范

本文档为前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性。统一团队编码规范和风格。通过遵照最佳实践，我们能确保优化的页面加载、性能以及可维护的代码。减少重复劳动。

文件编码

全部文档一致使用不带 BOM 的 UTF-8 编码。参考：@charset

<meta charset="utf-8">

结构分离

结构（HTML）、表现（CSS）、行为分离（JavaScript）

尽量确保"结构、样式与行为"三者分离，互不干涉的 Web 页面，这对前期开发和后期维护都至关重要。

图片

页面中通常图片较占流量的资源，使用图片时尽量选择最合适的格式，再通过工具进行压缩。

• 所有图片素材必须经过压缩才能发布；

• 图片压缩工具： TinyPng 智图；

• 同一个页面的多张小图片（icon），尽量合成雪碧图（CSS Sprites）；

• 任何时候都要保证图片不变形和模糊；

• 在非必要情况下，图片尽量不要使用base64；

缩进

统一使用软 Tab（四个空格）进行缩进，不要使用空格缩进。

注释

代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。

注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行。

<!-- start [Module] -->
<div class="module">

</div>
<!-- end [Module] -->

命名规范

• 文件和文件夹全部英文小写字母，多个单词组成时，采用中划线-分隔。

• CSS命名定义统一使用模块层级：模块+元件+子元件，如新闻模块 mod-news，新闻列表mod-news-list，新闻列表按钮mod-news-list_btn。

• 浏览器和Adblock通常会将含有这些词的作为广告拦截：ad、ads、adv、banner、sponsor、gg、guangg、guanggao 等，页面中尽量避免采用以上词汇来命名。

HTML

• 自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )。

• 把 id 留给后台开发和 JS 使用，禁止 id 使用在 CSS 命名中，一律使用 class 命名。

• 属性的定义，统一使用双引号。

<span class="logo">H5UI</span>

• HTML5 规范中 disabled、checked、selected 等属性不用设置值。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

• 一律使用小写字母

推荐

<img src="logo.png" alt="H5UI">

不建议

<IMG SRC="LOGO.png" ALT="H5UI">

工具

gulp

gulp

为了 Web 前端团队更好的协作开发同时提高项目编码质量，我们需要将 Web 前端使用工程化方式构建。团队成员必须熟悉使用gulp来完成日常工作。

Sketch

设计师输出的终稿文件统一为*.sketch，简约并强大的 Sketch 让你从此告别无痛切割。

Figma

Figma

Figma 是一个基于浏览器的协作式 UI 设计工具，Figma 从推出至今越来越受到 UI 设计师的青睐，如今也有很多的设计团队投入了 Figma 的怀抱。