利用CSS Sprites對圖檔分割顯示
網頁的加載一般包括很多預設工具圖檔，這些圖檔如果分散調用，每一張圖檔會發生一次http請求，而将多個小圖檔整合到一張圖檔，則能有效減少http請求，提高網站加載速度。
于是乎将頁面中的背景圖整合到一起，利用“background-image”，“background- repeat”，“background-position”的組合進行背景定位的技術被廣泛使用與了頁面建構中，這就是CSS Sprites。當然CSS Sprites技術也存在着維護不便，記憶體占用大等等的缺點。
好了，如果我隻說這些，那麼這篇文章就有點太水了。前面那些隻是對CSS Sprites技術的一個普及。作為一個開發者我們應該對它有一個更全面的認識，挖掘深度内容，這樣才能有利于我們效率開發，團隊協作。
拼圖遊戲
使用CSS Sprites，就好像玩拼圖遊戲一樣。一張白畫布，那麼多圖怎麼放到裡面去才會完美？這是個讓人糾結的事。而且在實際在工作場景中，我們面臨着項目開發時間緊張，UI設計圖要分期提供，多人協同開發一個項目等等問題。這些問題非常容易讓我們在大項目中迷失，造成CSS拼圖混亂，維護及其困難的情況。
定好規則，其實拼圖也挺好玩的
先期準備工作
應對一個項目後期維護成本大的問題，我們最好的解決方案就是在開始前制定一系列的規範來限制問題的産品。好的開始是成功的一半。對于CSS Sprites，在項目開始前，我們要充分認識一個産品，同UI設計師做好良好的溝通，對我們未來組成我們Sprites圖的各個元素有個大體的概念，比如我們的背景拼圖可能包括什麼。
一個好的Sprite畫布是必須的
網頁設計裡面，Grid系統是必不可少的，好的Grid能解決我們很多排版問題。Grid系統同樣适用于CSS Sprites。我們需要建立好一個優秀的畫闆，剩下的工作就是将元素合理的置于畫闆中了。
這張是我準備的一張CSS Sprites畫布，我們将在這個PSD裡面組合項目中的圖檔。
這張畫布是由20px*20px像素的格子組成。這個格子基本上由項目決定的，當我們同UI設計師溝通了解這個項目最多的為16px*16px 圖示時。我們就可以采用這種Grid尺寸為畫布了。
Sprites畫布有了，接下來就是對圖示進行分組了
對于資訊的歸納總結、分類是一個有意思的事情。就拿圖示來說，我們就可以根據圖示功能，尺寸等等作為資訊次元進行歸納。其實無論怎麼歸納，都是可以的，隻是記得我們以一個方向作為标準就可以了。
下圖是根據微網誌站外某元件完成的CSS Sprites
根據設計，我們了解在這個頁面，需要将圖檔元素根據功能分為4個次元，即微網誌品牌展示元素、送出按鈕、操作類小按鈕、提示類ICON。于是我将畫布X軸坐标方向每5個格(其實完全可以10個格或者更多)劃分為一個區域，每個這樣一個區域的Y軸方向不再劃分區域，這樣做的目的是為了以後增加圖示的擴充性。于是我們可以非常快速得到一個圖示的坐标了。比如不可用的灰色的分享按鈕 X坐标=5*20px=100px Y坐标=7*20px=140px; 那麼我們就取得了這個圖示的位置即background-position: -100px -140px。如果抽象成為公式的話，我們設定一個單元格的寬度為變量n。X坐标值Gx,Y坐标值Gy。那麼畫布中的元素css背景即為：background-position:-Gx*npx –Gy*npx 了。
現在圖有了，怎麼取圖也是關鍵
因為圖檔盡可能的被整合到一張拼圖，是以我們需要在頁面使用圖檔的位置使用空标簽定位的方式将拼圖所需展現的部分展示到頁面中。
.iconA { display:inline-block; height:16px; width:16px; background:url(icons.png) -20px -20px no-repeat }
項目出現二期需求了，需要增加圖示？
需求總是不能控制，我們要盡可能的為未來增加圖檔做好打算。在剛才的例子的項目裡後期産品需要增加圖示，于是：
我們可以繼續在對應的圖區内增加對應的圖示。但是這個例子同樣暴露了一個缺陷，如果新增一個按鈕區域大于5n(100px)，我們的圖區不足以承載。這時候我們可以同産品，設計師溝通協調，商議是否可以取消過大的按鈕設計。如果需求一定，那我們隻能沿着X軸方向繼續擴充畫布。不過，我們也需要注意無限的放大一張畫布，同樣會造成對頁面效率的影響。
及時的制定好規範，記錄好修改日志
可能在項目的初期，我們還來不及制定合圖的具體規範，在項目中我們會遇到各種各樣的問題。及時的總結，維護整張CSS拼圖，在拼圖的PSD或者PNG(使用Fireworks)做好注釋，友善他人開發。拼合好的圖檔送出到svn時也寫明log内容，這樣便日後查詢。
我們最終的目的
其實CSS Sprites經過了那麼多年的演變，前端開發者不斷的優化，都是為了提升頁面效率，提升團隊開發效率，減少開發維護成本而努力。配合最近非常流行的将CSS動态語言化(如SASS LESS等)，增加入變量， 繼承， 運算， 函數等。CSS Sprites會變的更好玩，會減少更多的開發維護成本。甚至我們在“面向對象”的子產品開發方式中，還可以使用一個類的的同一個backgroud-position：(x y)值，在不同的頁面通過引用不同的圖檔(background屬性)實作将一個頁面内圖檔請求量進一步減少的目的。随着進階浏覽器的普及我們還可以多使用CSS3屬性，減少漸變背景圖的使用，将純色ICON制作成字型取代拼圖等我們能更大程度上減少圖檔的使用量。這篇文章隻是抛磚引玉。實際上還有很多關于CSS Sprites的方法，還有衆多的拼圖生成工具。
說了那麼多，我們如果在日常的開發中，隻要我們多注意總結，敢于創新，敢于制定規範，那麼再小的事也能幹的很漂亮，對于CSS Sprites的優化就是這麼一個例子，你說不是麼？
轉載：(微網誌UDC原創博文，歡迎轉載并注明出處，歡迎訂閱 )