CSS的sprite和單位

(1).關於css sprite技術

比方說：

1. 有個論壇頻道，其中有個一些論壇特有的小圖標（火啊，頂啊之類），基於整站小圖標大團結的思想，這些小圖標也放在了那個icon背景圖片上了。然而，數年下來，我發現，論壇的那幾個圖標就論壇這個頻道使用了，這幾個圖標跟着整站走，對於99%的頁面而言，是多餘的，浪費流量，典型的「佔着茅坑不拉屎」！
2. 數年以後，有些圖標要作調整。問題來了，有些圖標不記得其餘地方有沒有使用過，不敢刪除，不敢替換。這可維護性立馬降低了不少！

改進：

1. 屬性分組：例如，全部分享系列的圖標（新浪微博，企鵝微博小圖標）集合
2. 功能分組：全部表示餐廳優惠狀態的圖標（惠，券等）集合在一塊兒
3. 直接獨立：無親無端的小圖標就不要硬是去攀關係，本身獨立一家便可

總結：
    不能執着於某個牛角尖（我要最少的請求數）而破壞了大局的權衡。

 

(2).絕對單位和相對單位

input, textarea, select這些控件元素自己就有文字大小，默認不會直接繼承body等父級標籤。所以，咱們須要reset下，不然16像素的文字會嚇着用戶的。

最初的時候，受一些大網站的影響，是這樣設置的：

Codeinput, textarea, select { font-size: 12px; }

我看了下，眼睛微博仍是這樣子的（//zxx: 無數次事實代表，要想舉反例，眼睛微博一找一個準）：

然而，這種設置很很差。爲什麼，看看上面「螃蟹和章魚的故事」中螃蟹的下場就知道了！不靈活，不能自動適應，只會變成困獸，任人宰割。

好的作法是這個：

Codeinput, textarea, select { font-size: 100%; }

這個百分之百最佳實踐，毋庸置疑，與什麼狗屁經驗沒有一點關係。爲何這樣設置？你用了就知道了。

對了，臨時想到其餘一點東西，我看到不少人寫兩層標籤按鈕的時候，會有相似下面的代碼：

Code.redbtn { height: 24px; ... }
.redbtn .btn { height: 24px; ... }

若是你不寫個高度height就缺少安全感的話，你這樣寫也好啊：

Code.redbtn { height: 24px; ... }
.redbtn .btn { height: 100%; ... }

其實呢，有個height是多餘的，這樣子就夠了：

Code.redbtn { ... }
.redbtn .btn { height: 24px; ... }

記住，內外標籤若是高度同樣，不要同時出現相同的定值。