前端开发文档

文件规范：

1，文件名用英文单词且语义化

2，一些浏览器会将含有这些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以上词汇。ad、ads、adv、banner、sponsor、gg、guangg、guanggao等。

---

html规范：

1，HTML属性应当按照以下给出的顺序依次排列，来确保代码的易读性

class 、id 、 name、src、for、 type、 href、title、alt、 role

2，标签、属性、属性命名由小写英文、数字和\_组成，且所有标签必须闭合，属性值必须用双引号`""`

CLASS --> n-head-title--> CLASS遵循名称+-，

ID --> n-head-title --> ID遵循名称+-

3，语义化HTML，尽可能减少DIV嵌套

CSS规范：

1，css属性显示顺序：显示属性、元素位置、元素属性、元素内容属性

.header {

/* 显示属性 */

display || visibility

list-style

position top || right || bottom || left

z-index

clear

float

/* 自身属性 */

width max-width || min-width

height max-height || min-height

overflow || clip

margin

padding

outline

border

background

/* 文本属性 */

color

font

text-overflow

text-align

text-indent

line-height

white-space

vertical-align

cursor

content

};

2，使用选择器时，命名比较短的词汇或者缩写的不允许直接定义样式。

.hd,.bd,.td{};//如这些命名

可用上级节点进行限定。

.recommend-mod .hd

多选择器规则之间换行，即当样式针对多个选择器时每个选择器占一行。

button.btn,

input.btn,

input[type="button"] {…};

优化`CSS`选择器。

#header a { color: #444; };/*CSS选择器是从右边到左边进行匹配*/

浏览器将检查整个文档中的所有链接和每个链接的父元素，并遍历文档树去查找ID为header的祖先元素，如果找不到header将追溯到文档的根节点，解决方法如下。

避免使用通配规则和相邻兄弟选择符、子选择符,、后代选择符、属性选择符等选择器

不要限定id选择符，如div#header（提权的除外）

不要限定类选择器，如ul.recommend（提权的除外）

不要使用 ul li a 这样长的选择符

避免使用标签子选择符，如#header > li > a

TypeScript书写规范：

类名（构造器）

-->小驼峰式但首字母大写

-->如：Current、DefaultConfig

函数名

-->小驼峰式

-->如：current()、defaultConfig()

变量名，常量名

-->小驼峰式

-->如：current、defaultConfig

2，代码格式

"()"前后需要跟空格

"="前后需要跟空格

","后面需要跟空格

JSON对象需格式化对象参数

if、while、for、do语句的执行体用"{}"括起来

"{}"格式如下。

if (a==1) {

//代码

};

图片规范

命名应用小写英文、数字、_组合，便于团队其他成员理解。

footer_btn.png

footer_btn2.png

注释规范：

TYPESCRIPT、CSS文件注释需要标明作者、文件版本、创建/修改时间、重大版本修改记录、函数描述、文件版本、创建或者修改时间、功能、作者等信息。