咱們應用CSS的能力應該分紅兩部分:一部分是CSS的API,重點是如何用CSS控制頁面內元素的樣式;另外一部分是CSS框架,重點是如何對CSS進行組織。css
推薦一種組織CSS的方法: base.css + common.css + page.css
html
base層:reset功能+通用類
common層:組件級別的CSS類
page層:頁面級別CSS樣式前端
模塊化可讓代碼高度重用,顯著提升開發效率。編程
咱們拿到設計稿的時候,首先能夠從視覺上進行劃分,樣式和功能相對獨立且穩定的一部分就能夠視爲模塊。
這裏介紹兩個拆分模塊技巧:服務器
模塊與模塊之間儘可能不要包含相同的部分,若是有相同的部分,應將他們提取出來,拆分紅一個獨立的模塊。框架
模塊應在保證儘量少的原則下,作到儘可能簡單,以提升重用性。模塊化
這裏推薦一種在class前加入前綴的方式構建相似於命名空間的概念. 舉個例子:post
<div class="box"> <div class="box-hd"></div> <div class="box-bd"></div> <div class="box-ft"></div> </div>
還需注意一點:css 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樣式。這個時候不建議給某個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出發點已經不只是「解決滑過狀態時背景圖片出現空白」的問題了,經過將多張圖片合併成一張大圖,會大大減小網頁的HTTP請求數,減少服務器壓力。這對於流量比較大的網站頗有價值。
CSS sprite只能合併用於背景的圖片,對於<img src=「」>
設置的圖片,是不能合併到css sprite大圖中的。若是合併這些圖片會影響頁面的可讀性。
對於橫向和縱向都平鋪的圖片也不能使用CSS sprite.
這裏擴展一個問題: 咱們在寫頁面時,對於圖片,是使用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前端開發修煉之道 -- 曹劉陽.