这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战
6.值与单位
6-1.文本内容必须用双引号包围
例子：
/* 建议 */
html[lang|="zh"] q:before {
font-family: "Microsoft YaHei", sans-serif;
content: "“";
}
html[lang|="zh"] q:after {
font-family: "Microsoft YaHei", sans-serif;
content: "”";
}
/* 不建议 */
html[lang|=zh] q:before {
font-family: 'Microsoft YaHei', sans-serif;
content: '“';
}
html[lang|=zh] q:after {
font-family: "Microsoft YaHei", sans-serif;
content: '”';
}
6-2.省略整数部分的 0
当数值为 0 – 1 之间的小数时，可以省略整数部分的 0。 例子：
/* 建议 */
.box {
opacity: .8;
}
/* 不建议 */
.box {
opacity: 0.8;
}
6-3. url() 函数中的路径可以不加引号
例子：
body {
background: url(../images/background.png);
}
6-4.url()函数中的绝对路径可省去协议名
例子：
body {
background: url(//baidu.com/img/bg.png);
}
6-5.长度为 0 时须省略单位
例子：
/* 建议 */
body {
margin: 0 5px;
}
/* 不建议 */
body {
margin: 0px 5px;
}
6-6.颜色值尽量使用缩写
例子：
/* 建议 */
.success {
color: #fff;
}
/* 不建议 */
.success {
color: #ffffff;
}
6-7.尽量不使用命名色值
例子：
/* 建议 */
.text-success {
color: #90ee90;
}
/* 不建议 */
.text-success {
color: lightgreen;
7.文本编排
7-1. 字号
由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。所以在 Windows 平台显示的中文内容，其字号应不小于 12px。
7-2.字体风格
如果需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用。
由于中文字体没有italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。
7-3.字重
font-weight 属性必须使用数值方式描述。
CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。
浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。
例子：
/* 建议 */
h1 {
font-weight: 700;
}
/* 不建议 */
h1 {
font-weight: bold;
}
7-4.行高
line-height 在定义文本段落时，应使用数值。
将line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置line-height。
如果line-height 用于控制垂直居中，应该设置成与容器高度一致。
例子：
.container {
line-height: 1.5;
}
8.变换与动画
8-1.使用 transition 时应指定 transition-property
例子：
/* 建议 */
.box {
transition: color 1s, border-color 1s;
}
/* 不建议 */
.box {
transition: all 1s;
}
9.响应式
9-1.Media Query 不得单独编排，必须与相关的规则一起定义
例子：
/* 建议 */
/* header styles */
@media (...) {
/* header styles */
}
/* main styles */
@media (...) {
/* main styles */
}
/* footer styles */
@media (...) {
/* footer styles */
}
/* 不建议 */
/* header styles */
/* main styles */
/* footer styles */
@media (...) {
/* header styles */
/* main styles */
/* footer styles */
}
9-2.Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中
例子：
@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) { /* dppx fallback */
/* Retina-specific stuff here */
}
10.兼容性
10-1. 属性前缀
带私有前缀的属性由长到短排列，按冒号位置对齐，标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。 例子：
.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
其它规范
11. class 和 id 命名规范
- 使用语义化、通用的命名方式；
- 使用连字符 - 作为 id、class 名称界定符，不要驼峰命名法和下划线；
- 避免选择器嵌套层级过多，尽量少于 3 级；
- 避免选择器和 class、id 叠加使用； 例子：
/* 建议 */
.user-info{}
/* 不建议 */
.userInfo{}
.user_info{}
12.不使用 @import
与 <link> 相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。
替代办法：
- 使用多个 元素
- 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
- 其他 CSS 文件合并工具
13.链接的样式顺序
a:link -> a:visited ->a:hover -> a:active
总结
以上是我最近整理的一些 CSS 中的编码规范，基本上涵盖了开发中的大多情况，相信你会一边对照自己的编码方式，一边思考规范编码的重要性，在往后的开发中，写出更加优雅的代码，谢谢。
