作者：LEA VEROW
- 盡量減少代碼重復：當某些值相互依賴時，應該把它們的相互關系用代碼表達出來
font-size:20px;
line-height:1.5; //而不是 line-height:30px;
除此之外，我們應該多用em，rem或者百分比單位與字體大小或父元素進行關聯(lián)。
- 繼承：inherit可以應用在任何CSS屬性上，而且它總是綁定到父元素的計算值（對于偽元素，則會取生成該偽元素的宿主元素）。
.callout{
position:relative;
...
}
.callout::before{
content:"";
border:inherit;
background:inherit;
...
}
-
相信你的眼睛而不是數(shù)字：視覺錯覺在任何形式的視覺設計中都普遍存在，在網(wǎng)頁設計中也不例外。比如在一個文本容器中指定相同的內(nèi)邊距，我們會看到上下的內(nèi)邊距比左右的大，而實際上它們是相等的。
關于媒體查詢：媒體查詢不能以一種連續(xù)的方式來修復問題，如果大部分代碼并不是以彈性的方式來編寫的，那么媒體查詢只不過是修補了某個特定分辨率的問題而已——這相當于把灰塵掃到地毯下面。還有，媒體查詢的斷點不應該有具體的設備來決定，而是根據(jù)設計自身來決定。一些方法可以采用來避免不必要的媒體查詢：
- 使用百分比長度取代固定長度，退而取之也應該嘗試使用vw、vh、vmin和vmax等和視口相關的單位。
- 在較大分辨率下得到固定寬度，使用max-width比width更好，因為它可以適應較小的分辨率。
- 為替換元素（img、object、video、iframe等）設置一個max-width:100%。
- 如果背景圖片需要鋪滿容器，使用background-size：cover就可以了。
- 進行行列式布局時，應該讓視口的寬度來決定列的數(shù)量，flex可以實現(xiàn)這一點。
- 使用多列文本時，指定column-width而不是column-count，這樣它就可以在較小的屏幕上自動顯示為單列布局。
總的來說，我們要盡最大努力實現(xiàn)彈性可伸縮的布局，并在媒體查詢的各個斷點區(qū)間內(nèi)指定相應的尺寸。
所以，如果你發(fā)現(xiàn)需要一大堆媒體查詢才能實現(xiàn)你想要的效果，不妨回頭審視一下你的代碼，因為在所有的情況下，響應式都不是唯一需要考慮的問題。
- 使用簡寫：合理使用簡寫是一種良好的防衛(wèi)性編碼方式，可以抵御未來的風險。當然，如果我們要明確覆蓋某些值的時候，展開式編寫是必須的。其實，展開式編寫和簡寫的配合可以發(fā)揮出很大的作用。
background:url(xx1.png) no-repeat top right / 2em 2em,
url(xx2.png) no-repeat bottom right / 2em 2em,
url(xx3.png) no-repeat bottom left / 2em 2em;
我們可以改寫為：
background:url(xx1.png) top right ,
url(xx2.png) bottom right,
url(xx3.png) bottom left;
background-size:2em 2em;
background-repeat:no-repeat;
