作者：LEA VEROW
- 盡量減少代碼重復(fù)：當(dāng)某些值相互依賴時(shí)茎活，應(yīng)該把它們的相互關(guān)系用代碼表達(dá)出來(lái)
font-size:20px;
line-height:1.5; //而不是 line-height:30px;
除此之外元镀，我們應(yīng)該多用em沧踏，rem或者百分比單位與字體大小或父元素進(jìn)行關(guān)聯(lián)步悠。
- 繼承：inherit可以應(yīng)用在任何CSS屬性上，而且它總是綁定到父元素的計(jì)算值（對(duì)于偽元素常空，則會(huì)取生成該偽元素的宿主元素）沽一。
.callout{
position:relative;
...
}
.callout::before{
content:"";
border:inherit;
background:inherit;
...
}
-
相信你的眼睛而不是數(shù)字：視覺(jué)錯(cuò)覺(jué)在任何形式的視覺(jué)設(shè)計(jì)中都普遍存在，在網(wǎng)頁(yè)設(shè)計(jì)中也不例外窟绷。比如在一個(gè)文本容器中指定相同的內(nèi)邊距锯玛，我們會(huì)看到上下的內(nèi)邊距比左右的大，而實(shí)際上它們是相等的兼蜈。
關(guān)于媒體查詢：媒體查詢不能以一種連續(xù)的方式來(lái)修復(fù)問(wèn)題攘残，如果大部分代碼并不是以彈性的方式來(lái)編寫(xiě)的，那么媒體查詢只不過(guò)是修補(bǔ)了某個(gè)特定分辨率的問(wèn)題而已——這相當(dāng)于把灰塵掃到地毯下面为狸。還有歼郭，媒體查詢的斷點(diǎn)不應(yīng)該有具體的設(shè)備來(lái)決定，而是根據(jù)設(shè)計(jì)自身來(lái)決定辐棒。一些方法可以采用來(lái)避免不必要的媒體查詢：
- 使用百分比長(zhǎng)度取代固定長(zhǎng)度病曾，退而取之也應(yīng)該嘗試使用vw、vh漾根、vmin和vmax等和視口相關(guān)的單位泰涂。
- 在較大分辨率下得到固定寬度，使用max-width比width更好辐怕，因?yàn)樗梢赃m應(yīng)較小的分辨率逼蒙。
- 為替換元素（img、object寄疏、video是牢、iframe等）設(shè)置一個(gè)max-width:100%。
- 如果背景圖片需要鋪滿容器陕截，使用background-size：cover就可以了驳棱。
- 進(jìn)行行列式布局時(shí)，應(yīng)該讓視口的寬度來(lái)決定列的數(shù)量农曲，flex可以實(shí)現(xiàn)這一點(diǎn)社搅。
- 使用多列文本時(shí)，指定column-width而不是column-count朋蔫，這樣它就可以在較小的屏幕上自動(dòng)顯示為單列布局罚渐。
總的來(lái)說(shuō)，我們要盡最大努力實(shí)現(xiàn)彈性可伸縮的布局驯妄，并在媒體查詢的各個(gè)斷點(diǎn)區(qū)間內(nèi)指定相應(yīng)的尺寸荷并。
所以，如果你發(fā)現(xiàn)需要一大堆媒體查詢才能實(shí)現(xiàn)你想要的效果青扔，不妨回頭審視一下你的代碼源织，因?yàn)樵谒械那闆r下翩伪，響應(yīng)式都不是唯一需要考慮的問(wèn)題。
- 使用簡(jiǎn)寫(xiě)：合理使用簡(jiǎn)寫(xiě)是一種良好的防衛(wèi)性編碼方式谈息，可以抵御未來(lái)的風(fēng)險(xiǎn)缘屹。當(dāng)然，如果我們要明確覆蓋某些值的時(shí)候侠仇，展開(kāi)式編寫(xiě)是必須的轻姿。其實(shí)，展開(kāi)式編寫(xiě)和簡(jiǎn)寫(xiě)的配合可以發(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;
我們可以改寫(xiě)為：
background:url(xx1.png) top right ,
url(xx2.png) bottom right,
url(xx3.png) bottom left;
background-size:2em 2em;
background-repeat:no-repeat;
