在Mozilla UI中优化CSS文件的规则

高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。

色彩缩写
色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：

1

 color：#113366
 

可以简写为

1

 color：#136
 

所有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、box-shadow等。

盒子大小
这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右四个方向，每个方向都有个外边距：

1
2
3
4

 margin-top:1px;
margin-right:1px;
margin-botton:1px;
margin-left:1px;
 

这四个值可以缩写到一起：

1

 margin:1px 1px 1px 1px;
 

缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同，则可以省掉：

1
2
3
4

 margin:1px;//四个方向的边距相同，等同于margin:1px 1px 1px 1px;
margin:1px 2px;//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px
margin:1px 2px 3px;//右边距和左边距相同，等同于margin:1px 2px 3px 2px;
margin:1px 2px 1px 3px;//注意，这里虽然上下边距都为1px，但是这里不能缩写。
 

边框(border)
border是个比较灵活的属性，它有border-width、border-style、border-color三个子属性。

1
2
3

 border-width:数字+单位;
border-style: none 　　 hidden 　　 dashed 　　 dotted 　　 double 　　 groove 　　 inset 　　 outset 　　 ridge 　　 solid ;
border-color: 颜色 ;
 

它可以按照width、style和color的顺序简写：

1

 border:5px solid #369;
 

有的时候，border可以写的更简单些，有些值可以省掉，但是请注意哪些是必须的，你也可以测试一下：

1
2
3
4
5

 border:groove red;  //大家猜猜这个边框的宽度是多少？
border:solid;  //这会是什么样子？
border:5px;  //这样可以吗？
border:5px red; //这样可以吗？？
border:red; //这样可以吗？？？
 

通过上面的代码可以了解到，border默认的宽度是3px，默认的色彩是black——黑色。border的缩写中border-style是必须的。

同时，还可以对每条边采用缩写：

1
2
3
4

 border-top:4px solid #333;
border-right:3px solid #666;
border-bottom:3px solid #666;
border-left:4px solid #333;
 

还可以对每个属性采用缩写：

1
2
3

 border-width：1px 2px 3px; //最多可用四个值，缩写规则类似盒子大小的缩写，下同
border-style：solid dashed dotted groove;
border-color:red blue white black;
 

outline
outline类似border，不同的是border会影响盒模型，而outline不会。

1
2
3

 outline-width:数字+单位;
outline-style: none 　　 dashed 　　 dotted 　　 double 　　 groove 　　 inset 　　 outset 　　 ridge 　　 solid ;
outline-color: 颜色 ;
 

可以缩写为：

1

 outline:1px solid red;
 

同样，outline的简写中，outline-style也是必须的，另外两个值则可选，默认值和border相同。

背景(background)
background是最常用的简写之一，它包含以下属性：

1
2
3
4
5

 background-color: color 　　 #hex 　　 RGB(% 　　 0-255) 　　 RGBa;
background-image:url();
background-repeat: repeat 　　 repeat-x 　　 repeat-y 　　 no-repeat;
background-position: X Y 　　 (top　　bottom　　center) (left　　right　　center);
background-attachment: scroll 　　 fixed;
 

background的简写可以大大的提高css的效率：

1

 background:#fff url(img.png) no-repeat 0 0;
 

background的简写也有些默认值：

1

 background:transparent none repeat scroll top left ;
 

background属性的值不会继承，你可以只声明其中的一个，其它的值会被应用默认的。

font
font简写也是使用最多的一个，它也是书写高效的CSS的方法之一。

font包含以下属性：

1
2
3
4
5
6

 font-style: normal 　　 italic 　　 oblique;
font-variant:normal 　　 small-caps;
font-weight: normal 　　 bold 　　 bolder 　　 　　 lighter 　　 (100-900);
font-size: (number+unit) 　　 (xx-small - xx-large);
line-height: normal 　　 (number+unit);
font-family:name,"more names";
 

font的各个属性也都有默认值，记住这些默认值相对来说比较重要：

1
2
3
4
5
6

 font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
 

事实上，font的简写是这些简写中最需要小心的一个，稍有疏忽就会造成一些意想不到的后果，所以，很多人并不赞成使用font缩写。

不过这里正好有个小手册，相信会让你更好的理解font的简写：

列表样式
可能大家用的最多的一条关于列表的属性就是：

1

 list-style:none
 

它会清除所有默认的列表样式，比如数字或者圆点。

list-style也有三个属性：

1
2
3

 list-style-type:none 　　 disc 　　 circle 　　 square 　　 decimal 　　 lower-alpha 　　 upper-alpha 　　 lower-roman 　　 upper-roman
list-style-position:  inside 　　 outside 　　 inherit
list-style-image:  (url) 　　 none 　　 inherit
 

list-style的默认属性如下：

1

 list-style:disc outside none
 

需要注意的是，如果list-tyle中定义了图片，那么图片的优先级要比list-style-type高，比如：

list-style:circle inside url(../img.gif)
这个例子中，如果img.gif存在，则不会显示前面设置的circle符号。

PS:其实list-style-type有很多种很有用的样式，感兴趣的同学可以参考一下：https://developer.mozilla.org/en/CSS/list-style-type

border-radius(圆角半径)
border-radius是css3中新加入的属性，用来实现圆角边框。这个属性目前不好的一点儿是，各个浏览器对它的支持不同，IE尚不支持，Gecko(firefox)和webkit(safari/chrome)等需分别使用私有前缀-moz-和-webkit-。更让人纠结的是，如果单个角的border-radius属性的写法在这两个浏览器的差异更大，你要书写大量的私有属性：

1
2
3
4
5
6
7
8
9

 -moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
 

呃，是不是你已经看的眼花了？这只是要实现左上角不是圆角，其它三个角都是圆角的情况。所以对于border-radius，神飞强烈建议使用缩写：

1
2
3

 -moz-border-radius:0 6px 6px;
-webkit-border-radius:0 6px 6px;
border-radius:0 6px 6px;
 

这样就简单了很多。PS:不幸的是，最新的Safari(4.0.5)还不支持这种缩写… (thanks @fireyy)

就总结这么多，还有其它的可以缩写的属性吗？欢迎大家提出一起讨论
以下文档描述了应用在 Mozilla UI 中优化 CSS 文件的规则。第一部分是对于 Mozilla 样式系统分类规则的一般性讨论。在了解这个系统的基础上，后续部分包含了一些指南，书写可以利用这个样式系统实践优点的样式的指南。

样式系统如何分类规则
样式系统把规则分为四大类。理解这些类是很重要的，因为对于规则的匹配来说他们是首先要考虑的。之后的段落中会使用“主选择符”这个说法。主选择符是指选择符最右边的部分(最终要匹配的那个元素，而不是它的祖先元素)。例如，在以下规则中：

a img, div > p, h1 + [title] {}

主选择符是 “img”, “p”, 和 “[title]“。

ID 规则
ID 选择符作为主选择符的规则。

例如：

button#backButton { } /* ID 类别的规则 */
#urlBar[type="autocomplete"] { } /* ID 类别的规则 */
treeitem > treerow > treecell#myCell:active { } /* ID 类别的规则 */
Class 规则
如果一条规则有一个指定的 class 作为主选择符，就被归入此类。

例如：

button.toolbarButton { } /* 基于 class 的规则 */
.fancyText { } /* 基于 class 的规则 */
menuitem > .menu-left[checked="true"] { } /* 基于 class 的规则 */
Tag 规则
如果主选择符不是 ID 或者 class，那么下一个类很可能就是 tag 分类。如果一条规则指定 tag 为主选择符，就被归入此类。

例如：

td { } /* 基于 tag 的规则 */
treeitem > treerow { } /* 基于 tag 的规则 */
input[type="checkbox"] { } /* 基于 tag 的规则 */
全局规则
除以上分类之外都归入此类。

例如：

[hidden="true"] { } /* 全局规则 */
*{} /* 全局规则 */
tree > [collapsed="true"] { } /* 全局规则 */
样式系统如何匹配规则
样式系统从最右边的选择符开始向左侧移动来匹配一条规则。样式系统会一直向左匹配选择符直到规则匹配完毕或者由于出错停止匹配。

对于规则分类的第一步发生在主选择符类别基础上。这个分类的目的是把那些不需要浪费时间匹配的规则过滤出来。这是显着提升性能的重点。对于一个给定的需要匹配的元素，规则越少，样式的渲染越快。例如，元素有一个 ID，那么只有和元素 ID 匹配的 ID 规则会被检索。只有和元素的 class 匹配的 class 规则会被检索。只有和 tag 匹配的 tag 规则会被检索。全局规则总是会被检索。

高效 CSS 指南
避免全局规则
确保规则不以全局分类结束

不要给 ID 分类规则指定标签名或者 class
如果有一条样式规则是以 ID 选择符为主选择符的，就别再画蛇添足的加上标签名了。ID 都是唯一的，因此加上标签名反而会无谓地拖慢匹配过程。(当有不同元素使用同一类名，而又需要动态地改变其中一个元素的类名来针对不同情况应用不同样式时是个例外。)

BAD – button#backButton { }
BAD – .menu-left#newMenuIcon { }
GOOD – #backButton { }
GOOD – #newMenuIcon { }
不要给 class 分类规则指定标签名
和以上规则类似，所有的类名也是唯一的。标签和类名连缀的写法是一个惯例(但是，如果设计的变更使得需要改变标签就会有灵活性的问题，因为也需要改变 class — 最好选用具有严格语义的名字，这种灵活性也是分离样式表的目标之一)。

BAD – treecell.indented { }
GOOD – .treecell-indented { }
BEST – .hierarchy-deep { }
尽量把规则应用到最明确的类上。
拖慢系统最大的一个原因是有太多的 tag 分类规则了。通过给元素增加类名，可以把这些 tag 类里的规则分一部分去class 分类，就可以不需要浪费时间来试图给一个标签匹配那么多的的规则了。

BAD – treeitem[mailfolder="true"] > treerow > treecell { }
GOOD – .treecell-mailfolder { }
避免后代选择符
CSS 中，后代选择符(descendant)[注1]的耗能高的可怕，尤其是选择符的规则是在 tag 或者全局分类中。子选择符(child selector)则经常是真正所需。如果没有主题模块所有者的明确允许，UI CSS 中禁止使用后代选择符。

BAD – treehead treerow treecell { }
BETTER, BUT STILL BAD (see next guideline) – treehead > treerow > treecell { }
Tag 类规则中最好不要包含后代选择符
避免使用具有 tag 类规则的后代选择符。这会明显地增加匹配时间（尤其是这些规则会被多次匹配时）。

BAD – treehead > treerow > treecell { }
BEST – .treecell-header { }
小心子选择符的使用
要小心使用子代选择符。如果有别的方式可以不用，就不要用子选择符。尤其是子选择符被大量使用在 RDF 树和类似的菜单中时。

BAD – treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
要注意模版中来自 RDF 的属性是可以复制的！可以利用这一点把 RDF 属性复制到需要改变那个属性的子元素上。

GOOD – .tree-folderpane-icon[IsImapServer="true"] { }
倚赖继承
了解并使用那些可以继承的属性。XUL widgetry[注2] 已经明确设置了，因此可以把 list-style-image 或者 font 规则应用到父级标签上，它将渗透进匿名内容。因此就不需要浪费时间为那些匿名内容写规则了。

BAD – #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
GOOD – #bookmarkMenuItem { list-style-image: url(blah); }
上例中，样式化匿名内容的需求（没有理解 list-style-image 可以继承）导致了一条 class 类规则。其实这条规则应该属于最明确的一类 — ID 类规则。

要记住，尤其是那些匿名内容，它们都有同样的 class。上面那个不好的例子导致需要检查每个菜单的图标是否包含在 bookmarks 菜单项中。这是非常可怕的高昂消耗（有很多菜单）；除 bookmarks 菜单之外，这条规则不应该被其他任何菜单想检查。

使用 -moz-image-region
把一堆图片放到一个单独的图片文件中，并用 -moz-image-region[注3] 选中会有显着的性能提升。()

注1: 后代选择符(descendant selector) 子选择符(child selector) 是有区别的。单从字面来讲，后代选择符，顾名思义包括儿子、孙子、重孙子等所有后代; 子选择符只是指儿子，就不管那帮孙子了。

注2: XUL widgetry 不清楚是啥。

注3: 貌似想法和现在说的 CSS sprites 方法差不多，要知道这可是十年前(2000年)的文章啊。 – 糖伴西红柿