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>  

　　效果如下

　　下面來對上面糟糕的代碼一一修復 

 　　1、如果決定改變字號，就得同時調整行高，因為這兩個屬性都寫成了絕對值。當某些值相互依賴時，它們的相互關系要用代碼表達出來

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

　　2、如果把這些長度值都改成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;

　　3、顏色是另一個重要的變數。如果要改變顏色，可能需要覆蓋四條聲明(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;