W3C-CSS工作组特邀专家对CSS编码技巧终极揭秘(下)

 2016-09-23 15:03

在CSS编码技巧(上)中,我们已经关注了最主要的问题:尽量减少代码重复。在这篇文章中,还有一些是需要大家了解的目录,但感觉又没有太多说的必要,所以很纠结。

还是做一个列表给大家吧,如果有你想看的,了解下就是了:

合理使用简写

第三点我来详细说下把,感觉很实用:

background: rebeccapurple;  
background-color: rebeccapurple;

你可能知道,这两行CSS 代码并不是等价的。前者是简写,它可以确保你得到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-sizebackground-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;

现在,我们只需要在一处修改,就可以改变所有的background-sizebackground-repeat了。


其实,这个章节是书的第1章《引言》,里面除了这个我比较感兴趣的CSS编码技巧以外,还有一些比较理论性的东西,还是这样,大家有兴趣可以展开阅读下:

引言

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: