1.DRY——（Don't repeat yourself ）儘量減少改動時要編輯的地方是代碼可維護的最大要素之一。 2.實例： 以上CSS樣式是對一個button進行樣式的定義，存在以下幾個問題： （1）當我們想讓按鈕更大時，可以改變font-size 屬性，通過改變字體來讓按鈕變大，但是相應的， ...
1.DRY——（Don't repeat yourself ）儘量減少改動時要編輯的地方是代碼可維護的最大要素之一。
2.實例：
1 .content button{ 2 padding: 6px 16px; 3 border: 1px solid #446d88; 4 background:#58a linear-gradient(#77a0bb,#58a); 5 border-radius:4px; 6 box-shadow:0 1px 5px gray; 7 color: white; 8 text-shadow: 0 -1px 1px #335166; 9 font-size:20px; 10 line-height:30px; 11 12 }
以上CSS樣式是對一個button進行樣式的定義，存在以下幾個問題：
（1）當我們想讓按鈕更大時，可以改變font-size 屬性，通過改變字體來讓按鈕變大，但是相應的，行高 line-height 也需要改變。（行高=字體大小*1.5）
（2）font-size 定義為絕對長度值，當我們把父級的字型大小加大時，相應的子元素的字型大小也需要變大，才會協調。（所以將font-size改為百分比或是em單位比較好。）
（3）相應的，當要放大一個按鈕時，padding ，border-radius等屬性的尺寸也需要變化。（所以將尺寸改為百分比或是em單位比較好。）
（4）這裡要註意的事，有些尺寸不需要改變的，eg：border的1px邊框，是不必隨著按鈕的變大而加粗的，所以還是絕對長度。
（5）background:#58a linear-gradient(#77a0bb,#58a);——可以把半透明的黑色或是白色疊加在主色調上，即可以產生主色調的亮色和暗色變體。
通過以上思考，作者將代碼修改如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test01</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 .content{ 8 width: 600px; 9 height: 600px; 10 margin: 100px auto; 11 border:1px solid pink; 12 } 13 .content button{ 14 padding:.3em .8em; 15 border:1px solid rgba(0,0,0,.1); 16 background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent); 17 font-size: 125%; 18 border-radius: .2em; 19 box-shadow: 0 .05em .25em rgba(0,0,0,.5); 20 color: white; 21 text-shadow: 0 -.05em .05em rgba(0,0,0,.5); 22 23 } 24 .content .b2{ 25 font-size: 200%; 26 background-color: red; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="content"> 32 <button class="b1">Yes!</button> 33 <button class="b2">Yes!</button> 34 </div> 35 </body> 36 </html>
通過上面的修改：我們只要通過覆蓋background-color和font-size就可以得到不同的顏色的大小的按鈕。
相關知識點：
（1）px，em，rem
（2）hsla
（3）transparent
（4）rgba
（5）linear-gradient
