編寫高質量的CSS

我們應用css的能力應該分成兩部分：一部分是css的api，重點是如何用css控制頁面內元素的樣式；另一部分是css框架，重點是如何對css進行組織。

base層：reset功能+通用類

common層：元件級別的css類

page層：頁面級別css樣式

舉個例子，有兩個列表，列表條目1字型14px紅色,列表條目2字型16px綠色：

方案一:

然後分別為number-list1與number-list2設定樣式

方案二 :

然後，將樣式分解為顆粒度小的class內，利用類組合達到效果。這就是多用組合少用繼承的思想。

模組化寫類的樣式時，常常需要寫margin樣式。這個時候不建議給某個div同時設定margin-top, margin-bottom值。因為可能會帶來上下margin重合的問題。

複習一下css權重問題：

css的選擇符是有權重的：id選擇器的權重是100、class選擇器的權重是10、標籤選擇器的權重是1；

我們在設定樣式時，適當使用子選擇器，可以增加css的權重。例如：span .font{} 的樣式會覆蓋.font{}的樣式。但css選擇符的權重越高，樣式越不容易覆蓋。為了保證樣式容易被覆蓋，提高可維護性，css選擇符需保證權重盡可能低。

將**的多張背景圖合併到一張大圖上，這便是css sprite.

css sprite出發點已經不僅是「解決滑過狀態時背景出現空白」的問題了，通過將多張合併成一張大圖，會大大減少網頁的http請求數，減小伺服器壓力。這對於流量比較大的**很有價值。

這裡擴充套件乙個問題: 我們在寫頁面時，對於，是使用img標籤好呢？還是使用background-img屬性好呢？

以下對二者進行乙個對比總結：

本質區別：img標籤是html標籤，background-img是css的乙個樣式；

載入方面：img標籤是html結構的一部分，img 會在載入結構時進行載入，而background-img會在結構和內容載入完成後才開始載入；

seo方面：搜尋引擎會關注img標籤的alt屬性；這時如果使用了background-img則頁面可讀性比較差；另外，有些**需要在禁用css情況下執行，此時比較重要的例如logo，就需要使用img標籤而不是background-img.

在多數場景下，二者都能完成工作。比如hover切換，可以改變img的src屬性，也可以改變background-img的url; 比如改變的位置，可以改變img元素的位置，也可以改變background-img的postion;

css sprite將多張合併為一張，通過控制background-position進行定位，這對於的位置精確程度要求非常高。定位完成後，大圖中的每個小圖的座標值不可輕易改動，這在一定程度上降低了可維護性。

因此，如何排列能夠盡量緊湊，同時保證不會影響擴充套件性，是css sprite技術最困難也是最具挑戰性的地方。

以上，從分層組織css，模組化css，使用時注意低權重原則，以及巧用css雪碧圖闡述了提高css**質量的四個方面。更多方法還需在實踐中積累。

[1].編寫高質量**-web前端開發修煉之道 -- 曹劉陽.