web开发规范

web开发规范

一.文件命名规则

a. 页面命名原则（驼峰式命名）

引文件统一使用 index.htm index.vue 文件名（小写）

各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称

b. 图片的命名原则

图片的名称分为头尾两部分，用 “-” 隔开，头部分表示此图片的大类性质

c. javascript 的命名原则

驼峰式命名

二、CSS 书写规范

基本原则：CSS 样式可细分为 3 类：自定义样式、重新定义 HTML 样式、链接状态样式。

1. 样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。（样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”文字样式样式名）

2.  HTML 样式为设计师重新定义已有的 HTML 标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。（样式名“HTML 标签”例：hr { border: 1px dotted #333333 }）

3. 链接状态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。

需注意细节：

class 命名规范： 名字有多单词组合的用短破折号“-”分开，头部分表示此样式的大类性质，小写英文，命名要语义化, 简明化。

代码块内容缩进，它能够提高层次结构的清晰度。

声明完结，所有声明都要用 “;” 结尾。

选择器和声明分行，每个选择器和声明都要独立新行。

规则分行，每个规则独立一行，两个规则之间隔行。

0和单位，省略0后面的单位，省略0开头小数点前面的0。

三、JavaScript 书写规范 

1. 书写过程中, 每行代码结束必须有分号; （具体根据项目 eslint 规则设定进行统一）

2. 变量命名: 驼峰式命名。变量要求是纯英文字母，首字母须小写，要求变量集中声明，避免全局变量。

3. 函数命名: 首字母小写驼峰式命名。

4. 命名语义化， 尽可能利用英文单词或其缩写。

5. 代码结构明了， 加适量注释，提高函数重用率。

四、注释

1、HTML 注释

2、CSS 注释

/* CSS推荐注释，左右各空一个空格，区块注释说明 */

/* CSS推荐注释，注释符号一上一下覆盖整个要注释的区块，多行注释 */

区域注释 /* 注释说明简要 */  /* end */