1.选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
/* good */ .username input {} .comment .avatar {} /* bad */ .page .header .login .username input {} .comment div * {}
2.id用来做DOM操作,class用来做样式选择器
3.在可以使用缩写的情况下,尽量使用属性缩写。
/* good */ .post { font: 12px/1.5 arial, sans-serif; } /* bad */ .post { font-family: arial, sans-serif; font-size: 12px; line-height: 1.5; }
3.font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写,最后必须指定一个通用字体族( serif / sans-serif )。
/* Display according to platform */ .article { font-family: Arial, sans-serif; } /* Specific for most platforms */ h1 { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; }
4.需要在 Windows 平台显示的中文内容,其字号应不小于 12px。
由于 Windows 的字体渲染机制,小于 12px 的文字显示效果极差、难以辨认。
5.需要在 Windows 平台显示的中文内容,不要使用除 normal 外的 font-style。其他平台也应慎用。
由于中文字体没有 italic 风格的实现,所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体),小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差,造成阅读困难。
参考文章:
CSS编码规范