5811前端基础规范-【概述和通用约定】

目录

1. 规范概述
2. 基本信息
3. 通用约定
   • 文档目录结构
   • 分离
   • 文件命名
   • 缩进
   • 编码
   • 小写
   • 注释
   • 省略嵌入式资源协议头
   • 代码有效性

规范概述

规范的制定是我们长期以来对工作的积累与沉淀的产物，帮助我们更快、更好、更高效的完成繁重、复杂、多样化的任务，我们制作规范的主要目的在于：

• 降低每个组员介入项目的门槛成本；
• 提高工作效率及协同开发的便捷性；
• 高度统一的代码风格；
• 提供一整套HTML、CSS解决方案，来帮助开发人员快速做出高质量的符合要求的页面。

基本信息

规范名称	Cook
当前版本	v1.0 beta
规范参考	百度，去哪儿
规范修改	雪梨
最后更新	2015.11.24

通用约定

1.文档目录结构

|-- 2015.12.22-项目名
	|-- www	项目目录
		|-- css   CSS存放目录
                    |-- cui.css         初始化样式库
                    |-- cui-rel.css     响应式框架参考bootstap （假设有的话）
                    |-- lib.css         用户公用样式
                    |-- style.css       用户样式
                    |-- style-rel.css   响应式用户样式 （假设有的话）
		|-- images   图片目录
		|-- font     字体目录（假设有的话）
		|-- js       脚本目录
                    |-- jquery.js   Jq框架，必须放第一个 （假设有的话）
                    |-- cui.js   cui类库，常用的功能 （使用时删除不需要功能模块）
                    |-- lib.js   用户自定义js （假设有的话）
            

css, js, images 三个目录是为了和现有项目保持一致，避免修改过大，所以保持不变。
css 和 js 目录，默认有我们使用的框架，项目完成后要清理不需要的代码模块和文件。

2.分离

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

将结构与表现、行为分离，保证它们之间的最小耦合，这对前期开发和后期维护都至关重要。

3.文件命名

• HTML文件名客户无特殊要求，可以以PSD图命名，方便维护查找；
• CSS文件名要与HTML文件保持一致

小型项目一个文件即可 style.css

大型项目以通用样式、频道内容、功能模块等划分

通用功能模块

全局 lib.css
表单 form.css
弹窗 pop.css
组件 ui.css

按页面类型：

首页 index.css
用户中心 user.css
新闻中心 news.css

命名需要根据项目情况灵活运用，遵循简单易懂原则。

4.缩进

使用tab（4个空格宽度）来进行缩进，可以在IDE里进行设置

5.编码

• 以 UTF-8 无 BOM 编码作为文件格式；
• 在HTML中文档中用 <meta charset="utf-8" /> 来指定编码；
• 为每个CSS文档显示的定义编码，在文档首行定义 @charset "utf-8";

在 Sass 中，如果文档中出现中文，却未显示定义编码，将会编译出错，为了统一各种写法，且提前规避错误几率，统一要求每个CSS文档都需要定义编码

6.小写

• 所有的HTML标签必须小写；
• 所有的HTML属性必须小写；
• 所有的样式名及规则必须小写。

7.注释

尽可能的为你的代码写上注释。
解释为什么要这样写，它是新鲜的方案还是解决了什么问题。

8.省略嵌入式资源协议头

省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )。如果不是这两个声明的URL则不省略。

省略协议声明，使URL成相对地址，防止内容混淆问题和导致小文件重复下载（这个主要是指http和https交杂的场景中）。

<!-- good -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- bad -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- good -->
.example {
  background: url(//www.google.com/images/example);
}

<!-- bad -->
.example {
  background: url(http://www.google.com/images/example);
}

注：省略协议头在IE7-8下会有一点小问题，外部CSS文件（link和@import）会被下载两遍，所以该条目的约定看具体项目。

9.代码有效性

• 使用 W3C HTML Validator 来验证你的HTML代码有效性；
• 使用 W3C CSS Validator 来验证你的CSS代码有效性。

代码验证不是最终目的，真的目的在于让开发者在经过多次的这种验证过程后，能够深刻理解到怎样的语法或写法是非标准和不推荐的，即使在某些场景下被迫要使用非标准写法，也可以做到心中有数。