web前端代码规范

前言

这不是一篇为了出规范而出来的规范，这是在最近的前端UI改版中形成的规范，如果你要修改web前端的代码，请务必读此规范。

一、CSS篇

关于CSS命名规范

1. 规范链接

参考nec的css规范：http://nec.netease.com/standard/css-sort.html
参考多玩的css规范： https://github.com/duowan/fe-guide/blob/master/css-guide.md

2.规范补充

规范是为了多人协作的时候在样式充分重用的情况下，避免样式命名冲突：
g- 用作大的布局；
m- 用作模块命名，模块的意义是页面上的一个区域，如一个“投资列表”、一个“banner图”，模块的作用更像是编程语言中的命名空间，里面的各种定义的class类名不会与其他模块冲突，如“m-module1 title”,“m-module2 title”，因此，请不要在子类名（如"title"）上单独定义样式，防止污染。模块的扩展用原模块名加上 ext-，如：“m-module1 ext-large ”;；
ui- 当模块更进一步抽象后，把抽象出来的代码可以命名为ui-，表示通用的模块组件；
u- 用作工具类，如u-clearfix，u-fl等等；
js- 用作js钩子，不定义样式；
l- 用作布局（layout），但其实并不建议使用，因为已经有“g-”用作大布局、并且“m-”加上“ext-”完全可以作为单独的模块布局、“m-”加子类名可以完成子类的布局。但不可否认，"l-"在快速布局使用时，确实也挺方便的，其来源于SMACSS规范 、Layout Rules；

目录结构

在webapp下面建了一个less文件目录，里面放符合命名规范的ui组件代码，如图：

enter description here

less生成的css文件在同级的css目录下（不在v2下面），如下图所示：

enter description here

目录文件详解

根据命名规范，在less目录下，创了11个less文件：
-ks.commom.less //一些公用的less变量
-ks.function.less //一些工具类
-ks.global.less //所有less的合集，最后使用的css是用这个less生成的
-ks.module.less //一些可能不通用的模块单元，
-ks.neat.less //css重置，基于normalize.css（关于normalize.css和reset.css请自行百度）
-ks.reset.less //根据网站设置的reset重置，这个并不是上面提到的reset.css，准确来说这个名字应该为commonReset.less
-ks.skin.less //为了以后的“一键换肤”功能预置的less
-ks.unit.less //通用的模块单元、组件
-ks.z.less //状态，目前没有用到
-temp.less //修改代码时用的临时less文件

更具体的解释可以打开less文件查看，代码就是最好的文档。

注意：

1. 最终引用的css文件为ks.global.css；
2. 如果要修改原来的less,修改less完毕后再重新生成一下ks.global.css；
3. 如果要新写符合规范的样式，在head.jspf中打开temp.less的引用，然后在temp.less里面写对应的代码，在改完毕后将代码按部分移动到对应的文件内；
4. 现有demo可以参考首页和投资列表页；
5. 现在定义了一些按钮、文字色、背景色、边框色、一些常用模块布局等，具体可以参考ks.unit.less、ks.common.less和ks.function.less；
6. 一些页面单独有的样式在"webapp/css/v2/page/*.css "里面；
7. 凡是涉及到修改ks开头的css文件和temp.css，请一定要修改less文件来生成css代码，不允许直接修改css代码；
8. 请一定详读此规范和less文件中顶部的注释代码；

二、图片篇

icon

以前的老版本使用的是font-awesome，因为有些设计图中的图标font-awesome库中并没有，所以现在改使用阿里的icon font，账号为kaisafe那个账号，项目为kaisafax项目，以后如有改到页面的icon，请逐步完成迁移；

enter description here

css sprite

有些小背景图（不能做icon font的）是做了雪碧图的，使用软件为“css背景图合并工具”

enter description here

此款软件生成的文件有三部分：

1. 众多小图源文件；
2. 生成的雪碧图大图；
3. 一个.sprite文件，说明了哪张图是由哪些小图组成的；

因此，请各位遵循这种约定，并且还加上一个css文件，用来保存各个背景图的css代码。

保存路径：雪碧图所有文件的保存路径在 “webapp/images/v2/sprite” 下面。

后记

一些待做的事情

现有一些页面引用了css目录下而不是css/v2目录下的css文件，请，在平常需求中，如有改到某个页面，请将css目录下的css文件移动到css/v2下面去，并查找相关页面，修改引用地址。