1.0 概述
为提高团队协作效率，规范文件管理，方便项目后期维护，提高代码质量，特制订此文档，前端开发人员必须遵照本规范进行前台页面开发。
2.0 目录规范
1.页面存放目录：文件夹命名均首字母大写
|--@root
|--Member //业务模块名
|--Conf
|--Controller //存放控制器
|--Veiw //存放页面
|--Basic //PC终端
|--Mobile //手机终端
|--Index //控制器名
|--index.php //页面
|--README.md
2.静态文件存放目录：所有文件及文件夹命名均为小写
|--@root
|--dist //存放编译后文件，用于测试
|--dev //存放编译后文件，用于开发；详见**3.静态文件输出目录**
|--basic
|--mobile
|--libs //第三方插件+
|--tmp //存放在页面中使用的图片，一般为可以后台上传的图片,页面调用路径为/Publictmp/
|--index_index //页面文件夹
|--src //存放源码文件
|--basic
|--mobile //以mobile目录为例，basic目录同理
|--common //存放mobile终端下公用文件
|--images //存放图像文件
|--css //存放css文件
|--common.js //js文件直接存放在common文件夹下
|--index
|--member //业务模块名
|--common//业务公共模块
|--css
|--js
|--index.js
|--index_index //命名规范：控制器名_页面名（与HTML文件命名相同）；存放页面私有文件
|--images
|--image.png
|--index.css
|--index.js
|--common //跨终端公共组件
|--package.json
|--webpack.config.dist.js //配置源文件，复制后重命名为webpack.config.js使用
|--README.md //项目介绍
- 静态文件输出目录：
webpack自动编译输出，除tmp文件夹下可添加图片外勿在此文件夹下添加任何文件
3.0 命名规范及注释规范
图片的名称分为头尾两部分，用减号-隔开，头部分表示此图片的大类性质
banner-* //放置在页面顶部的广告、装饰图案等长方形的图片
logo-* //标志性的图片
btn-*-* //在页面上位置不固定并且带有链接的小图片；命名规范：btn-功能名-大小/私有
pic-* //装饰用的照片
tit-* //不带链接表示标题的图片
icon-* //一系列图标图片
鼠标感应效果：图片名+on/off；例如：icon-list-on.png,icon-list-off.png
文本缩进
（重要）统一使用 2 个空格缩进，不得使用 tab 和 4 个空格
注释
更新代码后即时更新注释
- 在文件开始时写块注释：
/**
* 作用于哪些页面
* 注明代码业务/功能说明
* @authors Your Name (you@example.org)
* @date 2016-05-16
* @version $Id$
*/
// 单行注释添加一个空格
var offset = 0; // 此处注明变量注释
if(includeLabels) {
// If the labels are included we need to have a minimum offset of 20 pixels
// We need to set it explicitly because of the following bug:
// http://somebrowservendor.com/issue-tracker/ISSUE-1
offset = 20;
}
模块功能描述说明
/**
* ------------------------------------------------------------------
* 模块描述说明
* ------------------------------------------------------------------
*/
模块内的小函数方法归类：
/**
* 小函数方法归类说明，这些零散的小函数方法放在一起 对应 一个业务方法逻辑
* ------------------------------------------------------------------
*/
单个函数注释
/**
* 函数功能简述
*
* 具体描述一些细节
*
* @param {string} address 地址
* @param {array} com 商品数组
* @param {string} pay_status 支付方式
* @returns void
*
* @date 2014-04-12
* @author QETHAN<qinbinyang@zuijiao.net>
*/
css注释
/* Footer */
内容区
/* End Footer */
关注点分离(不采用）
web 中如何和为何区分不同的关注点?
这里的关注点主要指的是：信息（HTML 结构）、外观（CSS）和行为（JavaScript）。为了使它们成为可维护的干净整洁的代码，我们要尽可能的将它们分离开来。
格地保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。
尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。
在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。
不使用超过一到两张样式表i.e. main.css, vendor.css
不使用超过一到两个脚本（学会用合并脚本）
不使用行内样式<style>.no-good {}</style>
不在元素上使用 style 属性<hr style="border-top: 5px solid black">
不使用行内脚本<script>alert('no good')</script>
不使用表象元素i.e. <b>, <u>, <center>, <font>, <b>
不使用表象 class 名red, left, center
4.0 代码命名规范
BEM命名方式
BEM(Block,Element,Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面拆成一个个独立的富有寓意的快，从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用。即便团队引入新成员也容易维护，在某种程度上，BEM和OOP是相似的。
BEM其实是块（block）元素（element）修饰（modifier）的缩写。利用不同区块功能及样式来给元素命名。这三个部分使用__与--连接.命名约定的模式如下：
.black{}
.black__element{ }
.black--modifier{ }
block代表更高级别的抽象或组件。
block__element代表block的后代用于形成一个完整的block整体。
Block--modify代表block的不同状态或不同版本。
image.png
4.0 OOCSS规范
OOCSS不是一个框架，也不是一种技术，更不是一种新的语言，他只不过是一种方法，一种书写方式，换句话说OOCSS其核心就是用最简单的方式编写最整洁，最于净的CSS代码，从而使代码更具重用性，可维护性和可扩展性 （ 把原本写在一起的样式， 拆开多个class 写，提高可复用性）。
<button type="button" class="btn btn-danger btn-lg">使用danger的大按钮</button>
<button type="button" class="btn btn-primary btn-sm btn-radius5">使用primary的小按钮</button>
5.0 CSS规范
http://nec.netease.com/standard
文件命名规范
常用的文件命名：
全局：global.css
结构：layout.css
模块：module.css
主题：themes.css
长文件名必须以 - 中横杠符连接，项目里面的私有样式文件：项目名-业务模块名称.css。
/* 项目名为clout */
/* good */
clout-home.css
/* bad */
cloutHome.css;
选择器命名
（重要）在不是必须的情况下尽可能不用id选择器。
选择器名字全小写，不得使用大写。
较长选择器名字之间使用-中横杆连接。
当判断容易出现命名冲突的时候，命名需按规则：模块名-你的选择器名，如果出现多层级选择器的情况（应尽量避免超过3级的情况），每个层级间使用-中横杆连接，不建议直接使用嵌套。
/* 选择器名称 */
/* good */
.mydialog {
font-size: .28rem;
}
/* bad */
.myDialog {
font-size: .28rem;
}
/* 模块及嵌套 */
/* good */
<div class="mydialog">
<div class="mydialog-hd">
<p class="mydialog-hd-title">标题</p>
</div>
</div>
.mydialog-hd-title {
color: #3f3f3f;
}
/* bad */
<div class="mydialog">
<div class="hd">
<p class="title">标题</p>
</div>
</div>
.mydialog .hd .title {
color: #3f3f3f;
}
（建议）常用的选择器命名：
头部：header（hd）
标题：title
内容：container/content（cont）
页面主题：body（bd）/main
尾部：footer（ft）
导航：nav
子导航：subnav
标签页：tab
侧栏：sidebar
栏目：column/col
外围控制布局：wrapper
左中右：left center right
菜单：menu
子菜单：submenu
列表：list
当前的：active
图标：icon
提示信息：msg
小技巧：tips
文本
（重要）文本内容必须用双引号包围。
/* good */
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
/* bad */
body {
font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
}
数值
（重要）数值为 0 - 1 之间的小数，省略整数部分的 0 。
例：
/* good */
body {
font-size: .28rem;
}
/* bad */ {
font-size: 0.28rem;
}
单位
（重要）数值为 0 的属性值须省略单位。
/* good */
body {
padding: 0 .1rem;
}
/* bad */
body {
padding: 0rem .1rem;
}
url()
（重要） url() 函数中的路径不加引号
/* good */
body {
background: url(bg.png);
}
/* bad */
body {
background: url("bg.png");
}
url() 函数中的绝对路径可省去协议名
/* good */
body {
background: url(//yunzhijia.com/images/bg.png);
}
/* bad */
body {
background: url(http://yunzhijia.com/images/bg.png);
}
颜色
（重要）RGB颜色值必须使用十六进制形式 #3f3f3f。不允许使用 rgb()。
解释：
带有alpha（不透明度）的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后须保留一个空格。
/* good */
.border {
border: 1px solid #dce1e8;
}
.overlayer {
background-color: rgba(0, 0, 0, .7);
}
/* bad */
.border {
border: 1px solid rgb(220, 225, 232);
}
.overlayer {
background-color: rgba(0,0,0,.7);
}
网友评论