web项目开发 之 前端规范 --- CSS编码规范

/* good */
.selector {margin: 0;
}/* bad */
.selector {margin: 0
}
[建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
示例：
/* good */
#username input {}
.comment .avatar {}/* bad */
.page .header .login #username input {}
.comment div * {}
[建议] 在可以使用缩写的情况下，尽量使用属性缩写。
示例：
/* good */
.post {font: 12px/1.5 arial, sans-serif;
}/* bad */
.post {font-family: arial, sans-serif;font-size: 12px;line-height: 1.5;
}
[建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
示例：
/* good */
#username input {}
.comment .avatar {}/* bad */
.page .header .login #username input {}
.comment div * {}
3.2 属性缩写
[建议] 在可以使用缩写的情况下，尽量使用属性缩写。
示例：
/* good */
.post {font: 12px/1.5 arial, sans-serif;
}/* bad */
.post {font-family: arial, sans-serif;font-size: 12px;line-height: 1.5;
}
3.4 清除浮动
[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
解释：
触发 BFC 的方式很多，常见的有：
float 非 none
position 非 static
overflow 非 visible
如希望使用更小副作用的清除浮动方法，参见 A new micro clearfix hack 一文。
另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。
3.4 清除浮动
[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
解释：
触发 BFC 的方式很多，常见的有：
float 非 none
position 非 static
overflow 非 visible
如希望使用更小副作用的清除浮动方法，参见 A new micro clearfix hack 一文。
另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。
3.5 !important
[建议] 尽量不使用 !important 声明。
[建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。
解释：
必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。
3.6 z-index
[建议] 将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。
解释：
同层的多个元素，如多个由用户输入触发的 Dialog，在该层级内使用相同的 z-index 或递增 z-index。
建议每层包含100个 z-index 来容纳足够的元素，如果每层元素较多，可以调整这个数值。
[建议] 在可控环境下，期望显示在最上层的元素，z-index 指定为 999999。
解释：
可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。
不建议取值为 2147483647。以便于自身产品线被其他产品线引用时，当遇到层级覆盖冲突的情况，留出向上调整的空间。
[建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 !important，将 z-index 指定为 2147483647。
解释：
第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。
4.2 数值
[强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0。
示例：
/* good */
panel {opacity: .8;
}/* bad */
panel {opacity: 0.8;
}
4.4 长度
[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)
示例：
/* good */
body {padding: 0 5px;
}/* bad */
body {padding: 0px 5px;
}
4.5 颜色
[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
解释：
带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。
示例：
/* good */
.success {box-shadow: 0 0 2px rgba(0, 128, 0, .3);border-color: #008000;
}/* bad */
.success {box-shadow: 0 0 2px rgba(0,128,0,.3);border-color: rgb(0, 128, 0);
}
[强制] 颜色值可以缩写时，必须使用缩写形式。
示例：
/* good */
.success {background-color: #aca;
}/* bad */
.success {background-color: #aaccaa;
}
[强制] 颜色值不允许使用命名色值。
示例：
/* good */
.success {color: #90ee90;
}/* bad */
.success {color: lightgreen;
}
[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。
示例：
/* good */
.success {background-color: #aca;color: #90ee90;
}/* good */
.success {background-color: #ACA;color: #90EE90;
}/* bad */
.success {background-color: #ACA;color: #90ee90;
}
4.6 2D 位置
[强制] 必须同时给出水平和垂直方向的位置。
解释：
2D 位置初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。background-position属性值的定义
示例：
/* good */
body {background-position: center top; /* 50% 0% */
}/* bad */
body {background-position: top; /* 50% 0% */
}
5.1 字体族
[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。
解释：
所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：
字体
操作系统
Family
Name
宋体 (中易宋体)
Windows
SimSun
黑体
(中易黑体)
Windows
SimHei
微软雅黑
Windows
Microsoft
YaHei
微软正黑
Windows
Microsoft
JhengHei
华文黑体
Mac/iOS
STHeiti
冬青黑体
Mac/iOS
Hiragino
Sans GB
文泉驿正黑
Linux
WenQuanYi
Zen Hei
文泉驿微米黑
Linux
WenQuanYi
Micro Hei
示例：
h1 {font-family: "Microsoft YaHei";
}
[强制] font-family 不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一。
示例：
/* good */
body {font-family: Arial, sans-serif;
}h1 {font-family: Arial, "Microsoft YaHei", sans-serif;
}/* bad */
body {font-family: arial, sans-serif;
}h1 {font-family: Arial, "Microsoft YaHei", sans-serif;
}
5.2 字号
[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。
解释：
由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。
5.3 字体风格
[建议] 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用。
解释：
由于中文字体没有 italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。
5.4 字重
[强制] font-weight 属性必须使用数值方式描述。
解释：
CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。
浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。
但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表)，故使用数值描述增加了灵活性，也更简短。
示例：
/* good */
h1 {font-weight: 700;
}/* bad */
h1 {font-weight: bold;
}