盡量減少代碼重復(fù)
button{
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color:white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;
}
一個(gè)按鈕
這段代碼在可維護(hù)性方面存在一些問(wèn)題：
- 字號(hào)與行號(hào)寫(xiě)成了絕對(duì)值，若決定改變字號(hào)同時(shí)就要調(diào)整行高；且行高沒(méi)有反映出與字號(hào)的關(guān)系>>>因此，當(dāng)某些值互相依賴(lài)時(shí)，應(yīng)該把它們的相互關(guān)系用代碼表達(dá)出來(lái)
以上，行高是字號(hào)的1.5倍，可改成以下：
font-size: 20px;
line-height: 1.5;
跨出了這步，字號(hào)也不必設(shè)置為絕對(duì)值，可改用百分比或em單位
- 其他效果沒(méi)有依賴(lài)字號(hào)縮放，應(yīng)改為em單位（希望保持原樣的效果為絕對(duì)值）。同時(shí)，此處投影效果以及漸變效果都只適用于單一的條件下，要想使它適用于多種情況，可用HSLA,RGBA等顏色控制。
現(xiàn)在只要覆蓋background-color屬性就可以得到不同顏色版本的按鈕了：
不同顏色版本的按鈕
button{
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color:white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%; /*假設(shè)父級(jí)的字號(hào)是16px=1em*/
line-height: 1.5;
}
button.ok{
background-color: #6b0;
}
button.cancel{
background-color: #c00;
}
有時(shí)候，代碼易維護(hù)和代碼量少不可兼得；
currentColor本身是很多CSS顏色屬性的初始值；
inherit綁定父元素的計(jì)算值（對(duì)偽類(lèi)元素來(lái)說(shuō)，則會(huì)取生成該偽元素的宿主元素）
相信你的眼睛，而不是數(shù)字
視覺(jué)上的錯(cuò)覺(jué)在任何形式做的視覺(jué)設(shè)計(jì)中都普變存在，需要我們有針對(duì)性地進(jìn)行調(diào)整
關(guān)于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
避免不必要的媒體查詢：
- 使用百分比長(zhǎng)度來(lái)取代固定長(zhǎng)度
- 當(dāng)需要在較大分辨率下得到固定寬度時(shí)，使用max-width而不是width，因?yàn)樗梢赃m應(yīng)較小的分辨率，而無(wú)需使用媒體查詢
- 不要忘記為替換元素（比如img、object、video、iframe等）設(shè)置一個(gè)max-width，值為100%
- 假如背景圖片需要完整地鋪滿一個(gè)容器，不管容器的尺寸如何變化，background-sizw:cover這個(gè)屬性都可以做到。但是我們需要時(shí)刻牢記——帶寬不是無(wú)限的，在移動(dòng)網(wǎng)頁(yè)中通過(guò)css把一張大圖縮小是不明智的
- 當(dāng)圖片（或其他元素）以列進(jìn)行布局時(shí)，讓視口的寬度來(lái)決定列的數(shù)量。彈性盒布局（Flexbox）或者display：inline-block加上常規(guī)的文本折行行為都可以實(shí)現(xiàn)這一點(diǎn)
- 在使用多列文本時(shí)，指定column-width（列寬）而不是column-count（列數(shù)），這樣它就可以在較小的屏幕上自動(dòng)顯示為單列布局
盡最大努力實(shí)現(xiàn)彈性可伸縮的布局，并在媒體查詢的各個(gè)斷點(diǎn)區(qū)間內(nèi)指定相應(yīng)的尺寸
合理使用簡(jiǎn)寫(xiě)
合理使用簡(jiǎn)寫(xiě)是一種良好的防衛(wèi)性編碼方式，可以抵御未來(lái)的風(fēng)險(xiǎn)；如果要明確地去覆蓋某個(gè)具體的展開(kāi)式屬性并保留其他相關(guān)樣式，那就需要用展開(kāi)式屬性。
預(yù)處理器的使用
使用得當(dāng)，可以在大型項(xiàng)目中讓代碼更靈活，但可能導(dǎo)致CSS文件體積和復(fù)雜度的失控、調(diào)試難度增加、存在編譯延時(shí)。
