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;