WEB前端代码书写规范

WEB前端代码书写规范

1. 命名规范

a.ClassName命名

ClassName的命名应该尽量精短、明确，必须以单页面字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接：

例如：‘首页页面-- .index_logo{}’

注意：

在代码量大的情况下，尽量避免使用后代选择器以及子代选择器，尽可能多的取CalssName名称，以防后期修改代码的不便

b.图片命名

图片业务（可选） +（mod_）图片功能类别（必选）+ 图片模块名称（可选）

注意：

图片精度：如@2X，@3X,不可出现，蓝湖下载默认自带后缀，需自己手动删除！！！图片格式根据项目需要进行下载（png、jpg、svg....）
Icon图标规则：小的icon图标，使用div盒子背景图的模式放入，不要使用img标签嵌套带入！！！

图片业务：

List item

pp_：拍拍

wx_：微信

sq_：手Q

jd_：京东商城

…

图片功能类别：

mod_：是否公共，可选

icon：模块类固化的图标

logo：LOGO类

spr：单页面各种元素合并集合

btn：按钮

bg：可平铺或者大背景

…

图片模块名称：

goodslist：商品列表

goodsinfo：商品信息

useravatar：用户头像

…

图片精度：

（蓝湖下载自带，需手动删除）

普清：@1x

Retina：@2x | @3x

…

css颜色命名

颜色16进制用小写字母；颜色16进制尽量用简写。

#JS代码规范

a.声明变量命名

小驼峰命名
语义化

b. 基本

2个空格缩进，必须正确缩进

分号、逗号之后必须空格或转行

左大括号不转行

左大括号之前一定有空格

若左右大括号在一行，则大括号内侧必须有空格。例如const obj = { a: 1, b: 2 }

双目运算符前后必须有空格例如： a && b

非必要不写分号（无行末分号）

c. 变量

尽量少的使用var，没有显式赋值的变量必须用const，其余用let

允许多个变量共用声明和初始化语句，逗号隔开，但不能太长。例如：const a = 1, b = 2

变量名原则上使用小驼峰命名法（首字母小写，其余单词首字母大写），例如userInfo

对象内容很短时，可以在一行内完成

对象的最后一个成员后，不得添加逗号

对象成员变量赋值时，若属性名称和读取的变量名一致，则必须简写。

即const obj = { a: a}必须简写为const obj = { a }

d. 控制

if、else、for的执行语句块很短时，可以在行内完成，不必大括号展开。若换行，必须大括号展开。else应该与if的右大括号在同一行，此时else前后都有空格，即} else {

if、else if、else的层级嵌套尽量不要超过三层

3. 注释规范

a.HTML中单行注释

一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

·单行注释

说明：单行注释以两个斜线开始，以行尾结束
语法： // 注释说明
使用规则：注释双斜杠后有一个空格

·多行注释

说明：以 /* 开头， / 结尾
语法：/ 注释说明 /
使用规则：第一行为/，最后行为*/，其他行以开始，并且注释文字与保留一个空格

·函数(方法)注释

语法：

/**
* 函数说明
* @author 作者
* @param {参数类型} 描述信息
* @return {返回类型} 描述信息

### charset 字符集合

一般情况下统一使用 “UTF-8” 编码

静态页面使用.html后缀
主页统一使用index.html
广告样式或者is文件，不要用ad命名如ad.js，ad.css，ad.jpg
图片alt/title标签使用文章标题或者商品标题不为空
静态文件存放static目录下，按照功能分类创建二级目录如css，js，img
列表内容实用target="_blank”打开新页面
HTML标签名、类名、标签属性和大部分属性值统一用小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写

Css书写规范：

### 链接规范

页面内加载样式必须实用链接方式，不得穿插写入css样式

###样式规范

基本样式写入base.css，不用复写

#### 命名规范

避免id与calss重复

考虑命名重复率，取父级元素id/class命名部分命名main-nav:

重复率高的元素，实用自己姓名首字母命名部分，如： xm-clean:{}

同属性尽量写一起，如：margin:padding:…..width:height

避免使用table标签

### DOCTYPE 声明

HTML文件必须加上 DOCTYPE 声明

### 页面语言lang

推荐使用属性值 `cmn-Hans-CN`（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 `zh-CN` 属性值

###像素单位

若考虑兼容性，像素单位建议使用rem

### 元素属性

元素属性值使用双引号语法

###图片规范

### 内容图

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大

- 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式

- 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大

- **PC平台单张的图片的大小不应大于 200KB。**

### 背景图

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

- PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率

- 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式

- 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式

- 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式

- 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

### 代码格式化

样式书写一般有两种(一种是紧凑格式 ,一种是展开格式），建议使用统一的展开格式书写

### 属性值引号

css属性值需要用到引号时，统一使用单引号

### 代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

逗号分隔的取值，逗号之后一个空格

为单个css选择器或新申明开启新行

颜色值 `rgb()` `rgba()` `hsl()` `hsla()` `rect()` 中不需有空格，且取值不要带有不必要的 0

属性值十六进制数值能用简写的尽量用简写

### 属性书写顺序

建议遵循以下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）

2. 自身属性：width / height / margin / padding / border / background

3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

IE兼容模式：用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；

以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。

根据HTML5规范，通常在引入CSS和JS时不需要指明type，因为text/css和text/javascript分别时它们的默认值。

属性顺序应该按照特定的顺序出现以保证易读性;

class

name

data-*

src, for, type, href, value , max-length, max, min, pattern

placeholder, title, alt

aria-*, role

required, readonly, disabled