編寫高質量的CSS

分層組織CSS

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

推薦一種組織CSS的方法：
base.css + common.css + page.css

base層：reset功能+通用類
common層：組件級別的CSS類
page層：頁面級別CSS樣式

模塊化CSS——在頁面中引入面向對象編程思想

如何劃分模塊？

• 模塊化可讓代碼高度重用，顯著提升開發效率。

• 咱們拿到設計稿的時候，首先能夠從視覺上進行劃分，樣式和功能相對獨立且穩定的一部分就能夠視爲模塊。
  這裏介紹兩個拆分模塊技巧：

  • 模塊與模塊之間儘可能不要包含相同的部分，若是有相同的部分，應將他們提取出來，拆分紅一個獨立的模塊。

  • 模塊應在保證儘量少的原則下，作到儘可能簡單，以提升重用性。

CSS命名空間

這裏推薦一種在class前加入前綴的方式構建相似於命名空間的概念. 舉個例子：

<div class="box">
    <div class="box-hd"></div>
    <div class="box-bd"></div>
    <div class="box-ft"></div>
</div>

還需注意一點：css class的命名推薦使用英語，不要使用漢語拼音。

掛多個class仍是新建class? -- 多用組合，少用繼承

舉個例子，有兩個列表，列表條目1字體14px紅色,列表條目2字體16px綠色：
方案一:

<ul class="number-list1 f14 red">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>  
<ul class="number-list2 f16 green">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>

而後分別爲number-list1與number-list2設置樣式

方案二 :

<ul class="number-list1 f14 red">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>  
<ul class="number-list2 f16 green">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>

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

如何處理上下margin

模塊化寫類的樣式時，經常須要寫margin樣式。這個時候不建議給某個div同時設置margin-top, margin-bottom值。由於可能會帶來上下margin重合的問題。

• 若是不肯定模塊的上下margin特別穩定，最好不要將它寫進模塊的類裏，而是使用類的組合，單獨爲上下margin掛上用於肯定邊距的之類。

• 模塊作好不要混用margin-top和margin-bottom，統一使用margin-top或margin-bottom。

低權重原則

複習一下CSS權重問題：
CSS的選擇符是有權重的：id選擇器的權重是100、class選擇器的權重是十、標籤選擇器的權重是1；

• 當不一樣選擇符的樣式設置有衝突時，會採用權重高的選擇符設置的樣式。

• 若是CSS選擇符權重相同，那麼樣式會遵循就近原則，哪一個選擇符最後定義，就採用哪一個。（就近原則指的是定義樣式的前後，不是掛class名的前後）

咱們在設置樣式時，適當使用子選擇器，能夠增長CSS的權重。例如：span .font{} 的樣式會覆蓋.font{}的樣式。但CSS選擇符的權重越高，樣式越不容易覆蓋。爲了保證樣式容易被覆蓋，提升可維護性，CSS選擇符需保證權重儘量低。

CSS sprite

什麼是CSS sprite?

將網站的多張背景圖合併到一張大圖上，這即是CSS sprite.

CSS sprite 優勢？

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

哪些場合不適合使用CSS sprite?

• CSS sprite只能合併用於背景的圖片，對於<img src=「」> 設置的圖片，是不能合併到css sprite大圖中的。若是合併這些圖片會影響頁面的可讀性。

• 對於橫向和縱向都平鋪的圖片也不能使用CSS sprite.

這裏擴展一個問題: 咱們在寫頁面時，對於圖片，是使用img標籤好呢？仍是使用background-img屬性好呢？

如下對兩者進行一個對比總結：

1. 本質區別：img標籤是html標籤，background-img是CSS的一個樣式；

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

3. SEO方面：搜索引擎會關注img標籤的alt屬性；這時若是使用了background-img則頁面可讀性比較差；另外，有些網站須要在禁用css狀況下運行，此時比較重要的圖片例如logo，就須要使用img標籤而不是background-img.

4. 在多數場景下，兩者都能完成工做。好比hover切換圖片，能夠改變img的src屬性，也能夠改變background-img的url; 好比改變圖片的位置，能夠改變img元素的位置，也能夠改變background-img的postion;

CSS sprite有哪些缺點？

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

所以，如何排列圖片可以儘可能緊湊，同時保證不會影響擴展性，是CSS sprite技術最困難也是最具挑戰性的地方。

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

References

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