CSS编码规范

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编码规范

此条目发表在CSS分类目录。将固定链接加入收藏夹。

发表评论

邮箱地址不会被公开。 必填项已用*标注