在寫CSS的過程中，盡量減少代碼的重復，對于代碼閱讀和維護的好處是顯而易見的。在修改代碼時，需要改動的變量越少，意味著可能出錯的地方就越少，花費時間也越少。
在開始寫一個頁面的CSS時，嘗試去思考如何從更簡約的角度去定義一些root型的CSS規(guī)范，減少代碼冗余，提升質量。

比例優(yōu)化

以下是一個案例，為按鈕添加一些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;
}

得到的按鈕效果如下：

圖1-1

在這段CSS中，如果我們需要修改按鈕的字體大小的話，我們同時還需要修改按鈕的行高，同時因為字體很大的話，我們的圓角效果也會變得不協(xié)調，因為我們的效果都是為小按鈕設計的。
由于我們在移動端經(jīng)常需要使用REM來進行等比例大小縮放設計，所以為類似按鈕這些元素做好基本的CSS設計就顯得至關重要。
下面是優(yōu)化后的button1：

//為HTML設置默認字體大小為原來2倍
html{font-size:32px;}       
        
.button2 {
  //將padding的尺寸修改為相對于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的圓角也會根據(jù)按鈕的大小同比調整
  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);
  //字體相對于頁面大小為1.25倍
  font-size: 1.25rem;
  //行高是字體的1.5倍
  line-height: 1.5;
}

得到的結果則是一個同比放大2倍的button1。

圖1-2

以后只需要修改rem的root font-size即可等比例自動調整按鈕的大小。當然有些時候我們并不希望全部頁面都被一個定義尺寸牽制，也可以適當?shù)氖褂胑m來替換。

顏色優(yōu)化

除了比例以外，不同功能用途的按鈕往往顏色也會不同，如何快速設置不同用途按鈕的漸變色效果，我們可以做以下設置。

.button2 {
  padding: 0.375rem 1rem;
  border: 1px solid rgba(0, 0, 0, .1);
  //為按鈕的主色調增加一層白色或黑色的透明遮罩
  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;
}

得到效果如下圖：

圖1-3

總結

通過這種方式我們就可以快速定制大部分的需求按鈕。簡潔而易維護，不重復的代碼不僅是審美上的需求，更是實際工作中協(xié)同工作的重要需求，每次完成一個頁面時，我會重新瀏覽一下之前寫過的CSS和JS，即便現(xiàn)在的水平無法優(yōu)化到最簡潔，也應該在注釋或者筆記里標注下冗余的部分，在以后的學習中去跨越這些障礙。