《web前端開發修鍊之道》讀書筆記-CSS篇之”含苞怒放”

高品質的CSS篇

   掛載class時多用組合，少用繼承

    如果要實現所示的模組，應該怎麼來編寫CSS呢？

 

第一眼，我們可能會這樣來編寫CSS：

  .numberL1{border:1px solid #ccc;padding:10px;width:200px;}    .numberL1 li{height:20px;line-height:20px;font-size:12px}    .numberL2{border:1px solid #ccc;padding:10px;width:200px;}    .numberL2 li{height:20px;line-height:20px;font-size:16px}    .numberL3{border:1px solid #ccc;padding:10px;width:200px;}    .numberL3 li{height:20px;line-height:20px;font-size:12px;color:Red}

但是看上去會感覺很冗餘，裡面有很多重複的代碼，現在編程都講究物件導向，講究代碼複用。作者推薦了一種思路，提取了更多粒度更小的類，吐過類的組合實現了上面的效果，當然這樣也利於以後的可維護性，另一方面使類的職責更加單一，彈性更強，增加了類的重用性，提高了開發效率。

    .f12{font-size:12px}    .f16{font-size:16px}    .red{color:Red}    .numberList{border:1px solid #ccc;padding:10px;width:200px}    .numberList li{height:20px;line-height:20px}<ul class="numberList f12"><li>11111111111111</li><li>22222222222222</li></ul><ul class="numberList f16"><li>33333333333333</li><li>44444444444444</li></ul><ul class="numberList f12 red"><li>55555555555555</li><li>66666666666666</li></ul>

 

   低權重原則，避免濫用子選取器

   CSS的選擇符是有權重的，當不同的選擇符的樣式設定有衝突時，會採用權重較高的選擇符來設定樣式，權重規則如下所示：

1.     HTML標籤權重為1，例如 div,p權重為1，“div p”的權重為2
2.     class的權重為10，例如“div.footer”的權重為11
3.     id的權重為100，例如“#selecter.red”的權重為110

但是，如果碰到了權重相同的情況該如何處理呢，如下面所示：

<style type="text/css">span{font-size:40px}.test{color:red}.test2{color:green}</style><span class="test test2">1234567</span>

如果出現上述這種情況，那麼樣式會遵循就近原則，那個選擇符最後定義，就採用哪個選擇符的樣式。

上述情況，最終展現出來的將是綠色字型。需要強調的是，“就近原則”不是指的掛class名的先後順序，如 class="c1 c2"與class="c2 c1"是沒有區別的。

  CSS sprite

      CSS sprite主要作用是將網站的一些背景圖合并到一張大圖片上去，減少HTTP的請求數，從而降低伺服器壓力，然後再通過background-position進行定位，針對CSS sprite的文章園子裡已經由很多了，這裡就不講太多，但是有點要注意，並不是說任何網站都適用CSS sprite，CSS sprite也有它的缺點，它會導致“降低開發效率”和“增大維護難度”，對於流量不是很大的網站，就沒有必要去適用CSS sprite技術了！

     以上就是這期的筆記了，敬請期待下次的 《web前端開發修鍊之道》讀書筆記-CSS篇之"匯流成河"