关于前端规范的总结
Html:
1:嵌套的节点应该缩进四个空格
2:属性使用双引号 eg:class=""
3:单标签(`
`)不需要闭合。
4:所有的代码只用小写字母
5:定义编码方式``
6:引入 `CSS` 和 `JavaScript` 时不需要指明 `type`
7:HTML 属性书写顺序 id -->class -->name -->data-* -->src, for, type, href-->title, alt
8:尽量避免在 JavaScript 文件中生成标签
9:每个块元素、列表元素或表格元素都独占一行
10:语义化
Css:
1:缩进:4个空格
2:空格:空格1、空格2 (`:`与`属性值`之间必须包含空格)
.selector {
padding: 0px;
}
3:id命名:驼峰式命名,禁止使用id作为样式控制 class命名:中划线
4:所有的class命名,除公用样式外,所有的必须以当前模块名称或者简写名称开始,".modelName" + "-" + className。
eg:.login-label .login-input
5:每个选择器声明必须独占一行
eg:.post,
.page,
.comment {
line-height: 1.5;
}
6:选择器的嵌套层级应不大于`3级`
7:属性定义后必须以分号结尾。
8:属性书写:`布局定位属性` > `自身属性` > `文本属性` > `其他属性
布局定位属性:margin / padding / float / clear / position(top, right, bottom, left)
/ display / visibility / overflow / z-index(层叠顺序)
自身属性:width / height / background / border / outline等
文本属性:font / color / text-align / text-decoration / vertical-align / line-height
/text-indent / white-space / list-style(列表样式) /content等
其他属性:cursor / zoom等
9:`url()`函数中的路径不加引号。
10:颜色值不允许使用命名色值。颜色值大小写项目保持一致
11:background;必须同时给出水平和垂直方向的位置。
12:字体:宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei
13:`line-height`在定义文本段落时,应使用数值。当`line-height`用于控制垂直居中时,还是应该设置成与容器高度一致。
eg:.container {
line-height: 1.5;
}
14:`hack`属性紧跟与之对应的属性后面