三、最佳实践
3.1 选择器
1. 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。
/* good */
.post,
.page,
.comment {line-height: 1.5;}
/* bad */
.post, .page, .comment {line-height: 1.5;}
2. 如无必要,不得为id
、class
选择器添加类型选择器进行限定。(在性能和维护性上,都有一定的影响。)
/* good */
#error, .danger_message {font-color: #c00;}
/* bad */
dialog#error, p.danger_message {font-color: #c00;}
3. 选择器的嵌套层级应不大于3
级,位置靠后的限定条件应尽可能精确。
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
4. 选择器等级
a = 行内样式style。
b = ID选择器的数量。
c = 类、伪类和属性选择器的数量。
d = 类型选择器和伪元素选择器的数量。
3.2 属性
1:缩写
在可以使用缩写的情况下,尽量使用属性缩写。
/* good */
.post {font: 12px/1.5 arial, sans-serif;}
/* bad */
.post {font-family: arial, sans-serif; font-size: 12px;line-height: 1.5;}
使用border
/margin
/padding
等缩写时,应注意隐含值对实际数值的影响,确实需要设置多个方向的值时才使用缩写。
<article class="page"></article>
article {margin: 5px;border: 1px solid #999;}
/* good */
.page {margin-right: auto;margin-left: auto;}
.featured {border-color: #69c;}
/* bad */
.page {margin: 5px auto;}
.featured {border: 1px solid #69c;}
2:省略
当数值为 0 - 1 之间的小数时,省略整数部分的0
panel {opacity: .8;}
url()
函数中的路径不加引号 绝对路径可省去协议名
background: url(//baidu.com/img/bg.png) no-repeat 0 0;
3:顺序
根据属性的重要性按顺序书写:先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。
.c_box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}
如果属性间存在关联性,则不要隔开写。
/* 这里的height和line-height有关联性 */
.c_box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}
4: 2D 位置
必须同时给出水平和垂直方向的位置。( 2D 位置初始值为0% 0%
,但在只有一个方向的值时,另一个方向的值会被解析为 center。为避免理解上的困扰,应同时给出两个方向的值。)
/* good */
body {background-position: center top; /* 50% 0% */}
/* bad */
body {background-position: top; /* 50% 0% */}
5:颜色
除非你需要透明度而使用rgba,否则都使用#f0f0f0这样的16进制表示方法。颜色值可以缩写时,必须使用缩写形式(#000、#fff)。颜色值不允许使用命名色值( lightgreen )。
.c_box{color:#f00; background:rgba(0, 0, 0, 0.5);}
6:变换与动画
使用transition
时应指定transition-property
。
/* good */
.box {transition: color 1s, border-color 1s;}
/* bad */
.box {transition: all 1s;}
尽可能在浏览器能高效实现的属性上添加过渡和动画。在可能的情况下应选择这样四种变换:
transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;
典型的,可以使用translate
来代替left
作为动画属性。
/* good */
.box {transition: transform 1s;}
.box:hover {transform: translate(20px); /* move right for 20px */}
/* bad */
.box {left: 0;transition: left 1s;}
.box:hover {left: 20px; /* move right for 20px */}
7:line-height
line-height
在定义文本段落时,应使用数值。
将line-height
设置为数值,浏览器会基于当前元素设置的font-size
进行再次计算。在不同字号的文本段落组合中,能达到较为舒适的行间间隔效果,避免在每个设置了font-size
都需要设置line-height
。
当line-height
用于控制垂直居中时,还是应该设置成与容器高度一致。
8: !important
尽量不使用!important
声明,当需要强制指定样式且不允许任何场景覆盖时,通过标签内联和!important
定义样式。通常在第三方环境的应用中使用这种方案。
9 : z-index
定义:z-index
进行分层,对文档流外绝对定位元素的视觉层级关系进行管理。
个数:同层的多个元素,如多个由用户输入触发的 Dialog,在该层级内使用相同的z-index
或递增z-index
。建议每层包含100个z-index
来容纳足够的元素,如果每层元素较多,可以调整这个数值。
在可控环境下,期望显示在最上层的元素,z-index
指定为999999
。
可控环境分成两种,一种是自身产品线环境;还有一种是可能会被其他产品线引用,但是不会被外部第三方的产品引用。不建议取值为2147483647
。以便于自身产品线被其他产品线引用时,当遇到层级覆盖冲突的情况,留出向上调整的空间。
在第三方环境下,期望显示在最上层的元素,通过标签内联和!important
,将z-index
指定为2147483647
。
第三方环境对于开发者来说完全不可控。在第三方环境下的元素,为了保证元素不被其页面其他样式定义覆盖,需要采用此做法。
10 : 私有在前,标准在后
带私有前缀的属性由长到短排列,按冒号位置对齐。方便阅读,也便于在编辑器内进行多行编辑。
.c_box{.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}}
3.3 文本
文本内容必须用双引号包围。(文本类型的内容可能在选择器、属性值等内容中)
/* good */
html[lang|="zh"] q:before {font-family: "Microsoft YaHei", sans-serif; content: "“";}
html[lang|="zh"] q:after {font-family: "Microsoft YaHei", sans-serif; content: "”";}
/* bad */
html[lang|=zh] q:before {font-family: 'Microsoft YaHei', sans-serif; content: '“';}
html[lang|=zh] q:after {font-family: "Microsoft YaHei", sans-serif; content: "”";}
3.4 字体
1.字体族
font-family
属性中的字体族名称应使用字体的英文Family Name
,其中如有空格,须放置在引号中。font-family
不区分大小写,但在同一个项目中,同样的Family Name
大小写必须统一。
所谓英文 Family Name,为字体文件的一个元数据,常见名称如下:
font-family 对照表 |
---|
字体 | 操作系统 | 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
按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写,最后必须指定一个通用字体族(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;}
2. 字号
需要在 Windows 平台显示的中文内容,其字号应不小于12px
。(由于 Windows 的字体渲染机制,小于12px
的文字显示效果极差、难以辨认。)
3. 字体风格
需要在 Windows 平台显示的中文内容,不要使用除normal
外的font-style
。其他平台也应慎用。
由于中文字体没有italic
风格的实现,所有浏览器下都会 fallback 到obilique
实现 (自动拟合为斜体),小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差,造成阅读困难。
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;}
3.5 选择器合并
通常我们会将定义相同的或者有大部分属性值相同(确实是因为相关而相同)的一系列选择器组合到一起(采用逗号的方法)来统一定义。
/* 以下对布局类选择器统一做了清除浮动的操作 */
.g_hd:after,.g_bd:after,.g_ft:after{display:block;visibility:hidden;clear:both;height:0;content:".";}
.g_hd,.g_bd,.g_ft{zoom:1;}
/* 通常background总是会占用很多字节,所以一般情况下,我们都会这样统一调用 */
.c_logo,.c_help,.c_list li,.u_tab li,.u_tab li a{background:url(../images/sprite.png) no-repeat 9999px 9999px;}
.c_logo{background-position:0 0;}
/* 以下是某个元件的写法,因为确实很多元素是联动的或相关的,所以采用了组合写法,可以方便理解和修改 */
.u_tab li,.u_tab li a{display:inline;float:left;height:30px;line-height:30px;}
.u_tab li{margin:0 3px;}
.u_tab li a{padding:0 6px;}
3.6 背景图优化合并
1. 图片本身的优化:
- 图像质量要求和图像文件大小决定你用什么格式的图片,用较小的图片文件呈现较好的图像质量。
- 当图片色彩过于丰富且无透明要求时,建议采用jpg格式并保存为较高质量。
- 当图片色彩过于丰富又有透明或半透明要求或阴影效果时,建议采用png24格式,并对IE6进行png8退化(或在不得已情况下使用滤镜)。
- 当图片色彩不太丰富时无论有无透明要求,请采用png8格式,大多数情况下建议采用这种格式。
- 当图片有动画时,只能使用gif格式。
- 你可以使用工具对图片进行再次压缩,但前提是不会影响色彩和透明。
2. 多张图片的合并:
- 单个图标之间必须保留空隙,空隙大小由容器大小及显示方式决定。这样做的好处是既考虑了“容错性”又提高了图片的可维护性。
- 图标的排列方式,也由容器大小及显示方式决定。排列方式分为以下几种:横向排列(容器宽度有限)、纵向排列(容器高度有限)、斜线排列(容器宽高不限),靠左排列(容器背景居左)、靠右排列(容器背景居右)、水平居中排列(容器背景水平居中)、垂直居中排列(容器背景垂直居中)。
- 合并后图片大小不宜超过50K,建议大小在20K-50K之间。
- 为保证多次修改后的图片质量,请保留一份PSD原始图,修改和添加都在PSD中进行,最后导出png。
3. 分类合并:
并不是把所有的图标都合并在一张图片里就是最好的,除了要控制图片大小之外还要注意以下方法。
- 按照图片排列方式,把排列方式一样的图片进行合并,便于样式控制。
- 按照模块或元件,把同属于一个模块或元件的图片进行合并,方便模块或元件的维护。
- 按照图片大小,把大小一致或差不多的图片进行合并,可充分利用图片空间。
- 按照图片色彩,把色彩一致或差不多的图片进行合并,保证合并后图片的色彩不过于丰富,可防止色彩失真。
- 综合以上方法进行合并。
3.7 清除浮动
当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置clear
或触发BFC
的方式进行clearfix
。尽量不使用增加空标签的方式。
触发 BFC 的方式很多,常见的有:
- float 非 none
- position 非 static
- overflow 非 visible
另需注意,对已经触发 BFC 的元素不需要再进行 clearfix。
3.8 响应式
1. Media Query不得单独编排,必须与相关的规则一起定义。尽可能给出在高分辨率设备 (Retina) 下效果更佳的样式。
/* Good */
/* header styles */
@media (...) {
/* header styles */
}
/* main styles */
@media (...) {
/* main styles */
}
/* footer styles */
@media (...) {
/* footer styles */
}
/* Bad */
/* header styles */
/* main styles */
/* footer styles */
@media (...) {
/* header styles */
/* main styles */
/* footer styles */
}
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 */
}
3.9 如果CSS可以做到,就不要使用JS
让CSS做更多的事,减轻JS开发量。
- 用CSS控制交互或视觉的变化,JS只需要更改className。
- 利用CSS一次性更改多个节点样式,避免多次渲染,提高渲染效率。
- 如果你的产品允许不兼容低版本浏览器,那么动画实现可以交给CSS。
3.10 Hack
1. 原则上不允许使用Hack,通常 hack 会导致维护成本的增加。
很多不兼容问题可以通过改变方法和思路来解决,并非一定需要Hack,由于浏览器自身缺陷,我们无法避开的时候,可以允许使用适当的Hack。
2. 尽量使用选择器 hack
处理兼容性,而非属性 hack
。可以避免一些第三方库无法识别 hack 语法的问题。
/* IE 7 */
*:first-child + html #header {margin-top: 3px;padding: 5px;}
/* IE 6 */
* html #header {margin-top: 5px;padding: 4px;}
3. 尽量使用简单的属性HACK。
.box {_display: inline; /* fix double margin */ float: left;margin-left: 20px;}
.container {overflow: hidden; *zoom: 1; /* triggering hasLayout */}
4. 统一Hack方法
统一使用“*”和“_”分别对IE7和6进行Hack。如下代码所示:
/* IE7会显示灰色#888,IE6会显示白色#fff,其他浏览器显示黑色#000 */
.c_list{color:#000;*color:#888;_color:#fff;}
3.11 避免耗性能的属性
以下所举列的属性可能造成渲染性能问题。不过有时候需求大于一切……
/* expression */
.class{width:expression(this.width>100?'100px':'auto');}
/* filter */
.class{filter:alpha(opacity=50);}
3.12 文件压缩
合理的书写CSS能很大程度上减少文件大小,完成后,在不损坏文件内容的情况下,想尽一切办法压缩你的CSS,你可以借助压缩工具把注释和多余的空格、换行去掉。