css简写影响性能,你真的理解CSS属性简写的意义吗

高效意味着能在相同的时间完成更多的工作，而完成更多的工作的结果就是可能会带来更多的收益。在知识存量差别不大的背景下，大神和菜鸟的差异就是体现在知识调用迅捷度方面。你那边已经洋洋洒洒千行代码出去了，我这边还在查文档找资料看DEMO。你都收到工程款了估计我还在和客户协商阶段。真特么伤不起……

每个懂JavaScript的人再去学习jquery的时候那种感觉，绝对像三伏天突然进到空调间般的清爽顺畅。在CSS中也会让人有类似的体验，各位看官至少都是大鸟级别的人，关于CSS中属性的简写绝对是再熟悉不过了。估计看到这里的时候你脑海中已经浮现出来很多可以简写的CSS属性了，例如margin、font、box-shadow等等。

喜欢“八卦”的人，都会有一种“深挖到底”的特质。很不幸的是，我在面对自己感兴趣的问题的时候就会化身为这种“八卦人”。在“八卦之神”附身的瞬间，我就问了自己一个问题。“这些CSS简写的属性到底有毛用？”

苦苦思索了半天自己总结了出几点出来：简写属性可以减少代码量，让代码更整洁；简写属性提高了代码可读性，让代码易于维护；简写属性可以装逼……好吧，我承认最后一条有拼凑嫌疑。心中不禁疑惑起来，难道W3C那群货们搞出来一些简写属性能就是这么简单的原因么？

答案显然没这么简单，通过查资料也查不出个所以然。很明显在这个问题上我进入了思维误区，思维方式和思考方向一直在某个小范围内打转转出不去了。算了暂时搁一搁吧，说不定什么时候灵光一现福至心灵就给解决了。

一次项目中无意中遇见的小BUG让我猛然想起来了这个问题，以前在面对这个问题的时候，在网上搜索的资料都是在介绍具体有哪些属性的值可以简写，或是介绍可以简写的方式，难以让我一探究竟。

对于大神级别的存在，这问题压根就不是个问题，但是我是小白啊，还是小白中的小白，不搞明白我是“反反复复彻夜难眠”。都说喜欢思考的人运气总不会太差，看来在这方面我还是有点小小的运气啊//PS：自己悄悄的夸自己一下，顺便在心里给自己记上一笔。

大神们都很清楚，以下两行的CSS代码并不是等价的。

//简写

background:#7D7D7D;

//展开式

background-color:#7D7D7D;

你可能会很疑问为什么不是等价的呢？这两行CSS代码都可以让背景色变为#7D7D7D(灰色)么？如果我告诉你不一定，肯定你会笑话我是SB。稍安勿躁，且听我娓娓道来。

如果你是使用简写background，那么我能保证你的到的百分百是#7D7D7D纯色背景；但是如果你使用的是展开式属性background-color，那么应用这个CSS声明元素的背景最终有可能得到的是一个灰色的渐变图案、一位性感妹子的图片或是其他的什么东西。

因为有可能会有另外一条background-image或者background:linear-gradient();在起作用，展开式属性写法并不会帮助我们清空所有相关其他属性，从而干扰到我们想要达到的效果。例如定义了font-size而漏掉了font-weight，就会有可能会导致整版文字都是加粗黑乎乎的一片。如果使用简写font直接就会将font-weight的值覆盖掉，一切都不是问题。

假设你的效率和耐心都有相当的“修炼程度”，那么把所有的展开式都来设置一遍，然后收工去玩LOL也可以。但你回头很有可能会发现自己漏掉几个；或者更扯的是在未来某一天CSS×.0版本被W3C那帮货们推出来，而且里面还引入了更多展开式属性，这些属性都会有默认值，而这些默认值又不是我们想要的，结果就是你的代码没办法完全覆盖它们，不敢想象那简直就是一场“天崩地裂”般的灾难。

说到这里，好像展开式属性就一无是处，简写属性就是“灵丹妙药”。可惜我没有这个意思，我所提倡的是合理的使用简写属性。合理使用简写属性是一种良好的防卫性编码方式，可以抵御未来的风险。如果我们十分明确的要去覆盖某个具体的展开式属性并保留其他相关样式，这时候就需要展开式属性。两者并非“有你没我、你死我活”的关系，而是相互协调和互补的关系。

展开式属性与简写属性的配合非常高效有用，尤其是那些接受用逗号分隔的列表的属性。//ep: background、box-shadow都可以接受逗号分隔的多重设置。举个例子就明白了：

/*设置三张背景图*/

background:url(../images/t-r.png) no-repeat top right / 2em 2em,

url(../images/b-r.png) no-repeat bottom right / 2em 2em,

url(../images/b-l.png) no-repeat bottom left / 2em 2em;

相信已经身为大神的你，这几行代码简直就是“笑话”。稍安勿躁，这里我们需要借助这几行代码来阐述一个规则，并且介绍展开式属性与简写属性配合使用的威力。

在上面的代码中，简写属性background后面每个位置参数值的含义，我想各位应该很是熟悉。仔细观察我们会发现background-size和background-repeat的值被我们重复了三次，每层背景的这两个值都是相同的。这种情况我们需要借用一个规则了，其实这个规则我们在实际项目中的时候经常用到，只是我们没有注意过而已。这个规则就是CSS的“列表扩散规则”，在上述例子中我们能从这个规则中的到不少好处。

那么什么叫“列表扩散规则”呢？它的含义是：如果只为某个属性提供一个值，那它就会扩散并应用到列表中的每一项。有了这个规则我们就可以把上面的代码进行“重构”了，我们只需把重复的值抽出来写成一个展开式属性，同时删除简写属性中的相应值，就可以完美的完成重构过程。

/*设置三张背景图*/

background:url(../images/t-r.png) top right,

url(../images/b-r.png) bottom right,

url(../images/b-l.png) bottom left;

background-repeat:no-repeat;

background-size:2em 2em;

这样重构代码之后我们所得到的结果是不变的。我们只需要修改一处属性就能改变三个背景层的值，例如修改background-size那么三个背景层的此属性都等于被修改了。一次VS三次，一目了然可维护性更高是谁。展开式属性与简写属性的配合威力果然很是巨大。看完这些，你就会发现这种技巧经常在我们的项目中被应用。好东西大家都是会用的……

合理使用简写属性会让我们的代码更“健壮”，并且代码量也会相应减少。简写属性和展开式属性的配合能让代码的可读性和维护性大幅度提高。而我们需要做的就是做那么一点点的改变，这下妈妈再也不用担心我的学习了！

(报告完毕！)