CSS编码技巧

前面的话

　　本文将从DRY、currentColor、inherit和合理使用简写这几方面来详细介绍CSS编码技巧

 

DRY

　　DRY，即don`t repeat yourself，尽可能减小代码重复

　　在软件开发中，保持代码的DRY和可维护性是最大的挑战之一，而这句话对CSS也是适用的。在实践中，代码可维护性的最大要素是尽可能减小改动时要编辑的地方

　　灵活的CSS一般更容易扩展。在写出基础样式以后，只用极少的代码就能够扩展出不一样的变体，由于仅需覆盖一些变量就能够了

　　下面这段代码在可维护性方面存在一些问题

<style>
div{
    width:100px;
    padding:6px 16px;
    border:1px solid #446d88;
    background:#58a linear-gradient(#77aebb,#58a);
    border-radius:4px;
    box-shadow:0 1px 5px gray;
    color:white;
    text-shadow:0 -1px 1px #335166;
    font-size:20px
    line-height 30px;
}  
</style>
<div>YES</div>  

　　效果以下

　　下面来对上面糟糕的代码一一修复 

 　　一、若是决定改变字号，就得同时调整行高，由于这两个属性都写成了绝对值。当某些值相互依赖时，它们的相互关系要用代码表达出来

font-size:20px;
line-height:1.5;

　　二、若是把这些长度值都改为em单位，那这些效果的值就能够都变成可缩放的了，并且是依赖字号进行缩放

padding:.3em .8em;
border:1px solid #446d88;
background:#58a linear-gradient(#77aebb,#58a);
border-radius:.2em;
box-shadow:0 .05em .25em gray;
color:white;
text-shadow:0 -.05em .05em #335166;
font-size:125%;
line-height:1.5;

　　三、颜色是另外一个重要的变数。若是要改变颜色，可能须要覆盖四条声明(border-color、background、box-shadow和text-shadow)

　　其实只要把半透明的黑色或白色叠加在主色调上，便可产生主色调的亮色和暗色变体，这样就能简单地化解这个难题了

padding:.3em .8em;
border:1px solid rgba(0,0,0,0.1);
background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius:.2em;
box-shadow:0 .05em .25em rgba(0,0,0,0.5);
color:white;
text-shadow:0 -.05em .05em rgba(0,0,0,0.5);
font-size:125%;
line-height:1.5;

　　如今只须要覆盖background-color属性，就能够获得不一样颜色版本的按钮了　

.no{background-color: #c00;}
.ok{background-color: #6b0;}

【代码易维护vs代码量少】 

　　有时候，代码易维护和代码量少不可兼得。好比，为一个元素添加一道10px宽的边框，但左侧不加边框

border-width : 10px 10px 10px 0;

　　只要这一条声明就能够搞定了，但若是往后要改动边框的宽度，须要同时改三个地方。若是把它拆成两条声明的话，改起来就容易多了，并且可读性或许更好一些

border-width: 1px;
border-left-width: 0;

 

currentColor

　　在CSS3中，获得了一个特殊的颜色关键字currentColor，它是从SVG那里借鉴来的。这个关键字并无绑定到一个固定的颜色值，而是一直被解析为color。实际上，这个特性让它成为了CSS中有史以来的第一个变量。虽然功能颇有限，但它真的是个变量

　　举个例子，让全部的水平分割线自动与文本的颜色保持一致。有了currentcolor以后，只须要这样写

hr{background:currentColor;}

 

继承

　　inherit能够用在任何CSS属性中，并且它老是绑定到父元素的计算值(对伪元素来讲，则会取生成该伪元素的宿主元素)

　　举例来讲，要把表单元素的字体设定为与页面的其余部分相同，并不须要重复指定字体瞩性，只需利用inherit的特性便可

input,select,button{font:inherit;}

　　与此相似，要把超连接的颜色设定为页面中其余文本相同，也是用inherit

a{color:inherit;}

 

合理使用简写

　　如下两行CSS代码并非等价的

background : rebeccapurple
background-color : rebeccapurple

　　不要惧怕使用简写属性。合理使用简写是一种良好的防卫性编码方式，能够抵御将来的风险。固然，若是要明确地去覆盖某个具体的展开式属性并保留其余相关样式，那就需用展开式属性

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

　　能够简写为

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