CSS减少代码重复性的几种常见小技巧
在CSS中减少代码冗余是基本优化策略，具体来说就是减少代码重复性以及提高代码可维护性。即开发的CSS代码既要短小精悍，又要易于理解后期修改维护。常见的思路为关联值采用关系表达，而非直接数据值。这样当某些值在设计中存在相互依赖关系时，用代码将其相互关系表达出来。当后期修改维护时，仅仅只需要修改其中的一项参数即可实现修改多项代码参数的目的。下面以最常用的按钮代码为例进行说明。
HTML代码
CSS代码：
????????.button_start?{
????????????padding:?6px?16px;
????????????border:?1px?solid?#446d88;
????????????background:#58a?linear-gradient(#77a0bb,?#58a);
????????????border-radius:?4px;
????????????box-shadow:?0?1px?5px?gray;
????????????color:?white;
????????????text-shadow:?0?-1px?1px?#335166;
????????????font-size:?20px;
????????????line-height:?30px;
????????}
用户代理实际展示效果：
（1）行高（line-height）30px是字体大小（font-size）20px的1.5倍。这两者关联一起，即便需要按钮放大缩小能后期修改维护时，仍能确保视觉效果一致性。
修改代码为：
line-height:?1.5;
line-height属性的使用值为数值时，计算值为这个数字乘以元素的字体大小。负值是非法的。
（2）按钮字体大小（font-size）采用相对单位em。由于按钮应用于父元素中，当父元素需要调整字体大小时，按钮也需要作出相应的字体大小调整，以保证视觉效果的统一性。
修改代码为：
??font-size:?1.25em;/这里假定父元素字体大小为16px/
em为相对长度单位，一般元素属性采用em时，计算值时以当前元素的字体大小（font-size）值为参考单位。但对于font-size属性本身而言，若是采用em单位，则以父元素字体大小（font-size）为参考单位。
20÷16=1.25，故而font-size以父元素的字体大小为基准参考设置为1.25em。
同样也可以修改为：
??font-size:?125%;
字体大小（font-size）中百分比值同样是相对于父元素的字体大小的绝对字体大小。
（3）内间距（padding）、边框半径（border-radius）、盒阴影（box-shadow）、字体阴影（text-shadow）也可以采用相对单位em进行计算值，令它与元素字体大小关联。
代码修改为：
??padding:?.3em?.8em;
border-radius:?.2em;
box-shadow:?0?.05em?.25em?gray;
text-shadow:?0?-.05px?.05em?#335166;
内间距（padding）采用em单位时，是以元素自身的字体大小（font-size）的计算值为参考单位进行计算的，6÷20=0.3，16÷20=0.8，其它属性同理计算。
初始的CSS代码最后设计为以元素font-size和父元素font-size为计算参考的相关关系表达单位。这样如果需要放大或者缩小按钮，仅仅只需修改两个值即达到目标效果。
最终修改代码：
????????.button_start?{
????????????padding:?.3em?.8em;
????????????border:?1px?solid?#446d88;
????????????background:#58a?linear-gradient(#77a0bb,?#58a);
????????????border-radius:?.2em;
????????????box-shadow:?0?.05em?.25em?gray;
????????????color:?white;
????????????text-shadow:?0?-.05px?.05em?#335166;
????????????font-size:?125%;
????????????line-height:?1.5;
????????}
作者：请叫我二狗哥
|
|
