《CSS揭祕》第一章（1）
1、引言
DRY：Don’t Repeat Yourself
DRY 的反面：是 WET， 它的意思是 We Enjoy Typing（我們喜歡敲鍵盤） 或 Write Everything Twice（同樣的程式碼寫兩次）。
瀏覽器字首：
每個瀏覽器都可以實現這些實驗性的（ 甚至是私有的、 非標準的） 特性， 但要在名稱前面加上自己特有的字首。 最常見的字首分別是 Firefox 的 -moz-、 IE 的 -ms-、 Opera
的 -o- 以及 Safari 和 Chrome 的 -webkit-。
最終寫出的程式碼可能就是這樣的：
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
這裡面有兩條宣告是完全多餘的： -ms-border-radius 和 -o-borderradius 這兩個屬性從來沒有在任何瀏覽器中出現過， 因為 IE 和 Opera 從一開始就是直接實現 border-radius 這個無字首版本的。
解決工具：
- 像 CSS3, Please!（ http://css3please.com） 和 pleeease（ http://pleeease.io/playground.html） 這樣的網站允許你把無字首的 CSS 程式碼貼上進去， 它們會自動幫你把必要的字首都加好。 這類網站是“字首危機”所催生出的第一批工具， 很快就過氣了， 因為跟其他方案相比，它們的使用成本太高了。
- Autoprefixer（ https://github.com/ai/autoprefixer） 採用 Can I Use...（ http://caniuse.com） 的資料庫來判斷哪些字首是需要新增的； 此外，它是在本地完成編譯的， 類似前處理器。
- 我自己開發的 -prefix-free（ http://leaverou.github.io/prefixfree） 會在瀏覽器中進行特性檢測， 來決定哪些字首是需要的。 它的好處在於幾乎不需要更新， 因為其所有資訊都是用一份屬性清單在真實的瀏覽器環境中跑出來的結果。
- 類 似 Stylus（ http://stylus-lang.com/）、 LESS（ http://lesscss.org） 或Sass（ http://sass-lang.com） 的前處理器並不自帶任何加字首的方法，但很多人開發過一些能為常用屬性加字首的 mixin； 社群中也有一些庫提供了這類 mixin。
2、儘量減少程式碼重複
在實踐中， 程式碼可維護性的最大要素是儘量減少改動時要編輯的地方。 舉例來說， 如果在放大一個按鈕時需要在一堆規則中進行 10 處修改， 那就很可能會漏改其中某處， 當你在給別人善後時更是如此。 即使這些要修改的地方很明顯， 或者最終可以找齊它們， 但你還是浪費了時間， 原本可以利用這些時間來做點更有意義的事情。
而且， 這還不僅僅是後期修改的問題。 靈活的 CSS 通常更容易擴充套件：在寫出基礎樣式之後， 只用極少的程式碼就可以擴展出不同的變體， 因為只需覆蓋一些變數就可以了。 讓我們來看一個例子。
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;
這段程式碼在可維護性方面存在一些問題， 我們來一一修復。 最軟的杮子應該是跟字型尺寸相關的部分了。 如果我們決定改變字號1（可能是為了生成一個更大、 更重要的按鈕）， 就得同時調整行高， 因為這兩個屬性都寫成了絕對值。
更麻煩的是， 行高並沒有反映出它跟字號的關係， 因此我們還得做些算術， 算出字號改變之後的行高該是多少。 當某些值相互依賴時， 應該把它們的相互關係用程式碼表達出來。 在這個例子中， 行高是字號的 1.5 倍。 因此， 把程式碼改成下面這樣會更易維護：
font-size: 20px;
line-height: 1.5;
既然跨出了這一步， 我們為什麼還把字號定為絕對長度值呢？ 沒錯， 絕對值很容易掌控， 但每當你想要修改它們的時候， 它們都會回頭反咬你一口。 比如說， 如果我們決定把父級的字號加大， 就不得不修改每一處使用絕對值作為字型尺寸的樣式。 如果改用百分比或 em 單位就好多了：
font-size: 125%; /* 假設父級的字號是 16px */
line-height: 1.5;
現在， 如果我們改變父級的字號， 按鈕的尺寸就會隨之變化。 但是， 它看起來很不協調（ 參見圖 1-5）， 因為所有其他效果都是為一個小按鈕設計的， 並沒有跟著縮放。 如果我們把這些長度值都改成 em 單位， 那這些效果的值就都變成可縮放的了， 而且是依賴字號進行縮放1①。 按照這種方法， 我們就可以在一處控制按鈕的所有尺寸樣式了：
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
現在我們的大號按鈕看起來更像是一個原按鈕的等比例放大版本了（參見圖 1-6）。 請注意還有一些長度值是絕對值。 此時就需要重新審視到底哪些效果應該跟著按鈕一起放大， 而哪些效果是保持不變的。 比如在這個例子中， 我們希望按鈕的邊框粗細保持在 1px， 不受按鈕尺寸的影響。
不過， 讓按鈕變大或變小並不是我們唯一想要改動的地方。 顏色是另一個重要的變數。 比如， 假設我們要建立一個紅色的取消按鈕， 或者一個綠色的確定按鈕， 該怎麼做呢？ 眼下， 我們可能需要覆蓋四條宣告（ bordercolor、 background、 box-shadow 和 text-shadow）， 而且還有另一大難題：
要根據按鈕的亮面和暗面相對於主色調 #58a 變亮和變暗的程度來分別推匯出其他顏色各自的亮色和暗色版本。 此外， 若我們想把按鈕放在一個非白色的背景之上呢？ 顯然使用灰色（ gray） 作投影只適用於純白背景的情況。
其實只要把半透明的黑色或白色疊加在主色調上， 即可產生主色調的亮色和暗色變體， 這樣就能簡單地化解這個難題了：
padding : .3em .8em ; border : 1px solid rgba ( 0 , 0 , 0 ,. 1 ); 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% ; line-height : 1.5 ;現在我們只要覆蓋 background-color 屬性 ，就可以得到不同顏色版本 的按鈕了 （ 參見 圖 1-7 ）：
button.cancel { background-color : #c00 ; } button.ok { background-color : #6b0 ; }
3、技巧
1. 程式碼易維護 vs. 程式碼量少 2. currentColor 3. 繼承<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.btn {
padding: .3em .8em;
border: 1px solid rgba(0, 0, 0, .1);
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, .3);
font-size: 125%;
line-height: 1.5;
}
button.cancel {
background-color: #c00;
}
button.ok {
background-color: #6b0;
}
</style>
</head>
<body>
<input type="button" name="YES" id="btn" class="btn" value="YES">
</body>
</html>
摘抄自《CSS揭祕》，如有侵權，請聯絡。。。