3、标签属性顺序
属性应该按照特定的顺序出现以保证易读性;
class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
class是为高可复用组件设计的,所以应处在第一位;
id更加具体且应该尽量少使用,所以将它放在第二位
4、boolean属性
boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;
boolean属性的存在表示取值为true,不存在则表示取值为false。
2.4 杂项
1、所有标签必须采用合理嵌套。
// 禁止// 推荐
// 禁止inline级标签嵌套block级标签
2、img标签中必须添加alt属性。如:
3、减少标签数量
在编写HTML代码时,需要尽量避免多余的父节点;
很多时候,需要通过迭代和重构来使HTML变得更少。
三、 CSS代码规范
3.1 CSS引用规范
1、所有CSS均为外部调用,不得在页面书写任何内部样式或行内样式;
2、html页面引入样式文件:
统一使用link标签,少用@import(原生import有加载性能问题),sass、less、vue.js等文件使用import命令除外(因为最终前端构建工具会将引入文件编译成一个css文件)。
3.2 CSS注释规范
1、css头部文档注释( 统一加上@charset声明 ),如下:
@charset "utf-8"; /** * @created : 2017/09/15 * @author : Mr.Wang * @version : v1.0 * @desc : XX模块 **/
关于"version",如果对代码有修改更新version版本号,并添加相关注释。
2、内部模块之间注释(建议 @模块英文名,好查找):
/* @info 商品信息区 -----------------------------------------------------------*/ .infoArea{} /* 单行注释 */ .specArea{} /* @price 商品价格区 ----------------------------------------------------------*/ .price{}3.3 CSS字符规范
1、缩进:使用soft tab(2个空格);
2、分号:每个属性声明末尾都要加分号;
3、空行:
以下几种情况需要空行
/** * 文件最后保留一个空行 * "}"后最好跟一个空行,包括scss中嵌套的规则 * 属性之间需要适当的空行,具体见属性声明顺序 **/ .element { ... } .dialog { color: red; &:after { ... } }
4、空格
以下几种情况不需要空格 | 以下几种情况需要空格 |
---|---|
属性名后 | 属性值前 |
多个规则的分隔符","前 | 选择器">", "+", "~"前后 |
!important "!"后 | "{"前 |
属性值中"("后和")"前 | !important "!"前 |
行末不要有多余的空格 | 属性值中的","后 |
注释"/*"后和"*/"前 |
/* 示例代码 */ .element, .dialog { color: red !important; background-color: rgba(0, 0, 0, .5); }
5、引号
最外层统一使用双引号;
url的内容要用引号;
属性选择器中的属性值需要引号。
.element:after { content: ""; background-image: url("logo.png"); } li[data-type="single"] { ... }3.4 样式中属性
1、排序规则:先外部 > 再自身 > 后内部
推荐工具CSScomb,sublime 和 vscode 均有对应插件
A. 影响文档流的属性(display, position, float, clear, visibility, table-layout等) B. 自身盒模型的属性(width, height, margin, padding, border等) C. 排版相关属性(font, line-height, text-align, text-indent, vertical-align等) D. 装饰性属性(color, background, opacity, cursor等) E. 生成内容的属性(content, list-style, quotes等)
2、属性简写
属性简写需要你非常清楚属性值的正确顺序,而且在大多数情况下并不需要设置属性简写中包含的所有值,所以建议尽量分开声明会更加清晰;
margin 和 padding 相反,需要使用简写;
常见的属性简写包括:font background transition animation
/* not good */ .element { transition: opacity 1s linear 2s; } /* good */ .element { transition-delay: 2s; transition-timing-function: linear; transition-duration: 1s; transition-property: opacity; }3.5 杂项
1、不允许有空的规则;
2、元素选择器用小写字母;
3、去掉小数点前面的0;
4、去掉数字中不必要的小数点和末尾的0;
5、属性值"0"后面不要加单位;
6、同个属性不同前缀的写法需要在垂直方向保持对齐,具体参照右边的写法;
7、无前缀的标准属性应该写在有前缀的属性后面;
8、不要在同个规则里出现重复的属性,如果重复的属性是连续的则没关系;
9、不要在一个文件里出现两个相同的规则;
10、用 border: 0; 代替 border: none;;
11、选择器不要超过4层(在scss中如果超过4层应该考虑用嵌套的方式来写);
12、发布的代码中不要有 @import;
13、尽量少用"*"选择器。
三、 JavaScript规范(jslint/eslint) 3.1 JS文件引用1、引入格式:
脚本语言发展至今,也只有js混的最好了,所以type="text/javascript"类型指定可以省去。
2、引入位置: body标签内最后部(非body外面), 减少因载入脚本而造成其他页面内容阻塞的问题(js单线程)。
页面内容….
3、引入方式:html页面中禁止直接编写js代码,统一使用