Page 44 - css揭秘

如果你发现自己需要一大堆媒体查询才能让设计适应大大小小的屏幕，
那么不妨后退一步，重新审视你的代码结构。因为在所有的情况下，响应式
都不是唯一需要考虑的问题。

合理使用简写

你可能知道，以下两行 CSS 代码并不是等价的：

background: rebeccapurple;

background-color: rebeccapurple;

前者是简写，它可以确保你得到 rebeccapurple 纯色背景；但如果
你用的是展开式的单个属性（background-color），那这个元素的背景最终
有可能会显示为一个粉色的渐变图案、一张猫的图片或其他任何东西，因为
同时可能会有一条 background-image 声明在起作用。在使用展开式属性的
写法时，通常会遇到这样的问题：展开式写法并不会帮助你清空所有相关的
其他属性，从而可能会干扰你想要达到的效果。

当然，你可以把所有的展开式属性全都设置一遍，然后收工，但你可能
会漏掉几个；又或者，CSS 工作组可能会在未来引入更多的展开式属性，那
时你的代码就无法完全覆盖它们了。不要害怕使用简写属性。合理使用简写
是一种良好的防卫性编码方式，可以抵御未来的风险。当然，如果我们要明
确地去覆盖某个具体的展开式属性并保留其他相关样式，那就需要用展开式
属性，就像我们在“尽量减少代码重复”一节中为了得到按钮的其他颜色版
本所做的那样。
展开式属性与简写属性的配合使用也是非常有用的，可以让代码更加
DRY。对于那些接受一个用逗号分隔的列表的属性（比如 background），尤
其如此。下面的例子可以很好地解释这一点：

background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;

请注意 background-size 和 background-repeat 的值被重复了三遍，
尽管每层背景的这两个值确实是相同的。其实我们可以从 CSS 的“列表扩
散规则”那里得到好处。它的意思是说，如果只为某个属性提供一个值，那
它就会扩散并应用到列表中的每一项。因此，我们可以把这些重复的值从简
写属性中抽出来写成一个展开式属性：

background: url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

CSS 编码技巧 13

඀ࠡ JOEC