在寫CSS的過程中胰挑，盡量減少代碼的重復(fù)，對(duì)于代碼閱讀和維護(hù)的好處是顯而易見的椿肩。在修改代碼時(shí)瞻颂，需要改動(dòng)的變量越少，意味著可能出錯(cuò)的地方就越少郑象，花費(fèi)時(shí)間也越少贡这。
在開始寫一個(gè)頁面的CSS時(shí)，嘗試去思考如何從更簡約的角度去定義一些root型的CSS規(guī)范厂榛，減少代碼冗余盖矫，提升質(zhì)量丽惭。
比例優(yōu)化
以下是一個(gè)案例，為按鈕添加一些CSS效果：
.button1 {
padding: 0.375rem 1rem;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 0.25rem;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 1.25rem;
line-height: 1.5;
}
得到的按鈕效果如下：
在這段CSS中辈双，如果我們需要修改按鈕的字體大小的話责掏，我們同時(shí)還需要修改按鈕的行高，同時(shí)因?yàn)樽煮w很大的話湃望，我們的圓角效果也會(huì)變得不協(xié)調(diào)拷橘，因?yàn)槲覀兊男Ч际菫樾“粹o設(shè)計(jì)的。
由于我們?cè)谝苿?dòng)端經(jīng)常需要使用REM來進(jìn)行等比例大小縮放設(shè)計(jì)喜爷，所以為類似按鈕這些元素做好基本的CSS設(shè)計(jì)就顯得至關(guān)重要。
下面是優(yōu)化后的button1：
//為HTML設(shè)置默認(rèn)字體大小為原來2倍
html{font-size:32px;}
.button2 {
//將padding的尺寸修改為相對(duì)于htm頁面的rem
padding: 0.375rem 1rem;
border: 1px solid rgba(0, 0, 0, .1);
background: #000 linear-gradient(hsla(0, 0%, 100%, .2), transparent);
//border的圓角也會(huì)根據(jù)按鈕的大小同比調(diào)整
border-radius: 0.25rem;
box-shadow: 0 0.05rem .25rem rgba(0, 0, 0, .5);
color: white;
text-shadow: 0 -0.05rem .05rem rgba(0, 0, 0, .5);
//字體相對(duì)于頁面大小為1.25倍
font-size: 1.25rem;
//行高是字體的1.5倍
line-height: 1.5;
}
得到的結(jié)果則是一個(gè)同比放大2倍的button1萄唇。
以后只需要修改rem的root font-size即可等比例自動(dòng)調(diào)整按鈕的大小檩帐。當(dāng)然有些時(shí)候我們并不希望全部頁面都被一個(gè)定義尺寸牽制，也可以適當(dāng)?shù)氖褂胑m來替換另萤。
顏色優(yōu)化
除了比例以外湃密，不同功能用途的按鈕往往顏色也會(huì)不同，如何快速設(shè)置不同用途按鈕的漸變色效果四敞，我們可以做以下設(shè)置泛源。
.button2 {
padding: 0.375rem 1rem;
border: 1px solid rgba(0, 0, 0, .1);
//為按鈕的主色調(diào)增加一層白色或黑色的透明遮罩
background: #000 linear-gradient(hsla(0, 0%, 100%, .2), transparent);
border-radius: 0.25rem;
box-shadow: 0 0.05rem .25rem rgba(0,0,0,.5);
color: white;
text-shadow: 0 -0.05rem .05rem rgba(0, 0, 0, .5);
font-size: 1.25rem;
line-height: 1.5;
}
這樣我們只要再修改background-color屬性，就可以生成不同顏色屬性的按鈕了忿危。
#cancel {
background-color: #c00;
}
#ok {
background-color: #6b0;
}
得到效果如下圖：
總結(jié)
通過這種方式我們就可以快速定制大部分的需求按鈕达箍。簡潔而易維護(hù)，不重復(fù)的代碼不僅是審美上的需求铺厨，更是實(shí)際工作中協(xié)同工作的重要需求缎玫，每次完成一個(gè)頁面時(shí)，我會(huì)重新瀏覽一下之前寫過的CSS和JS解滓，即便現(xiàn)在的水平無法優(yōu)化到最簡潔赃磨，也應(yīng)該在注釋或者筆記里標(biāo)注下冗余的部分，在以后的學(xué)習(xí)中去跨越這些障礙洼裤。
