文件规范：
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文件注释需要标明作者、文件版本、创建/修改时间、重大版本修改记录、函数描述、文件版本、创建或者修改时间、功能、作者等信息。
网友评论