CSSSprites技術(shù)對(duì)于廣大的前端工程師來(lái)說(shuō)應(yīng)該是一點(diǎn)也不陌生。這個(gè)被國(guó)內(nèi)開(kāi)發(fā)者昵稱(chēng)為CSS精靈CSS雪碧的家伙到底解決了什么問(wèn)題，我們又怎樣合理使用這個(gè)技術(shù)呢？下面讓我們?cè)敿?xì)的聊聊。

在大家還在撥號(hào)上網(wǎng)的“遠(yuǎn)古時(shí)期”，由于網(wǎng)速的限制，頁(yè)面開(kāi)發(fā)者都喜歡把網(wǎng)頁(yè)里面的圖片字節(jié)數(shù)控制的非常小，往往在一個(gè)圖片文件夾里散落著n多的小 碎圖。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)速的提升，大家越來(lái)越重視頁(yè)面的加載速度，頁(yè)面效率問(wèn)題，過(guò)去的那些小圖便成為了前端開(kāi)發(fā)者的眼中釘，因?yàn)槊考虞d一張圖片都 會(huì)產(chǎn)生一次瀏覽器請(qǐng)求數(shù)，發(fā)起的請(qǐng)求數(shù)越多那么頁(yè)面加載的速度也越慢。還有當(dāng)頁(yè)面加載時(shí)，圖片一個(gè)個(gè)的零星顯示，鼠標(biāo)經(jīng)過(guò)時(shí)候背景閃白等也都是我們不能忍 受的。于是乎將頁(yè)面中的背景圖整合到一起，利用“background- image”，“background-repeat”，“background-position”的組合進(jìn)行背景定位的技術(shù)被廣泛使用與了頁(yè)面構(gòu)建 中，這就是CSSSprites。當(dāng)然CSSSprites技術(shù)也存在著維護(hù)不便，內(nèi)存占用大等等的缺點(diǎn)。

好了，如果我只說(shuō)這些，那么這篇文章就有點(diǎn)太水了。前面那些只是對(duì)CSSSprites技術(shù)的一個(gè)普及。作為一個(gè)開(kāi)發(fā)者我們應(yīng)該對(duì)它有一個(gè)更全面的認(rèn)識(shí)，挖掘深度內(nèi)容，這樣才能有利于我們效率開(kāi)發(fā)，團(tuán)隊(duì)協(xié)作。

頭疼的多人拼圖游戲

使用CSSSprites，就好像玩拼圖游戲一樣。一張白畫(huà)布，那么多圖怎么放到里面去才會(huì)完美？這是個(gè)讓人糾結(jié)的事。而且在實(shí)際在工作場(chǎng)景中， 我們面臨著項(xiàng)目開(kāi)發(fā)時(shí)間緊張，UI設(shè)計(jì)圖要分期提供，多人協(xié)同開(kāi)發(fā)一個(gè)項(xiàng)目等等問(wèn)題。這些問(wèn)題非常容易讓我們?cè)诖箜?xiàng)目中迷失，造成CSS拼圖混亂，維護(hù)及 其困難的情況。

定好規(guī)則，其實(shí)拼圖也挺好玩的

先期的準(zhǔn)備工作

應(yīng)對(duì)一個(gè)項(xiàng)目后期維護(hù)成本大的問(wèn)題，我們最好的解決方案就是在開(kāi)始前制定一系列的規(guī)范來(lái)限制問(wèn)題的產(chǎn)品。好的開(kāi)始是成功的一半。對(duì)于 CSSSprites，在項(xiàng)目開(kāi)始前，我們要充分認(rèn)識(shí)一個(gè)產(chǎn)品，同UI設(shè)計(jì)師做好良好的溝通，對(duì)我們未來(lái)組成我們Sprites圖的各個(gè)元素有個(gè)大體的 概念，比如我們的背景拼圖可能包括什么。

一個(gè)好的Sprite畫(huà)布是必須的

網(wǎng)頁(yè)設(shè)計(jì)里面，Grid系統(tǒng)是必不可少的，好的Grid能解決我們很多排版問(wèn)題。Grid系統(tǒng)同樣適用于CSSSprites。我們需要?jiǎng)?chuàng)建好一個(gè)優(yōu)秀的畫(huà)板，剩下的工作就是將元素合理的置于畫(huà)板中了。

這張是我準(zhǔn)備的一張CSSSprites畫(huà)布，我們將在這個(gè)PSD里面組合項(xiàng)目中的圖片。

這張畫(huà)布是由20px*20px像素的格子組成。這個(gè)格子基本上由項(xiàng)目決定的，當(dāng)我們同UI設(shè)計(jì)師溝通了解這個(gè)項(xiàng)目最多的為16px*16px圖標(biāo)時(shí)。我們就可以采用這種Grid尺寸為畫(huà)布了。

Sprites畫(huà)布有了，接下來(lái)就是對(duì)圖標(biāo)進(jìn)行分組了

對(duì)于信息的歸納總結(jié)、分類(lèi)是一個(gè)有意思的事情。就拿圖標(biāo)來(lái)說(shuō)，我們就可以根據(jù)圖標(biāo)功能，尺寸等等作為信息維度進(jìn)行歸納。其實(shí)無(wú)論怎么歸納，都是可以的，只是記得我們以一個(gè)方向作為標(biāo)準(zhǔn)就可以了。

下圖是根據(jù)微博站外某組件完成的CSSSprites

根據(jù)設(shè)計(jì)，我們了解在這個(gè)頁(yè)面，需要將圖片元素根據(jù)功能分為4個(gè)維度，即微博品牌展示元素、提交按鈕、操作類(lèi)小按鈕、提示類(lèi)ICON。于是我將畫(huà)布 X軸坐標(biāo)方向每5個(gè)格（其實(shí)完全可以10個(gè)格或者更多）劃分為一個(gè)區(qū)域，每個(gè)這樣一個(gè)區(qū)域的Y軸方向不再劃分區(qū)域，這樣做的目的是為了以后增加圖標(biāo)的擴(kuò)展 性。于是我們可以非?？焖俚玫揭粋€(gè)圖標(biāo)的坐標(biāo)了。比如不可用的灰色的分享按鈕X坐標(biāo)=5*20px=100pxY坐 標(biāo)=7*20px=140px;那么我們就取得了這個(gè)圖標(biāo)的位置即background-position:-100px-140px。如果抽象成 為公式的話(huà)，我們?cè)O(shè)置一個(gè)單元格的寬度為變量n。X坐標(biāo)值Gx,Y坐標(biāo)值Gy。那么畫(huà)布中的元素css背景即為：background- position:-Gx*npx–Gy*npx了。

現(xiàn)在圖有了，怎么取圖也是關(guān)鍵

因?yàn)閳D片盡可能的被整合到一張拼圖，所以我們需要在頁(yè)面使用圖片的位置使用空標(biāo)簽定位的方式將拼圖所需展現(xiàn)的部分展示到頁(yè)面中。

<spanclass=”iconA”></span>

.iconA{display:inline-block;height:16px;width:16px;background:url(icons.png)-20px-20pxno-repeat}

項(xiàng)目出現(xiàn)二期需求了，需要增加圖標(biāo)？

需求總是不能控制，我們要盡可能的為未來(lái)增加圖片做好打算。在剛才的例子的項(xiàng)目里后期產(chǎn)品需要增加圖標(biāo)，于是：

我們可以繼續(xù)在對(duì)應(yīng)的圖區(qū)內(nèi)增加對(duì)應(yīng)的圖標(biāo)。但是這個(gè)例子同樣暴露了一個(gè)缺陷，如果新增一個(gè)按鈕區(qū)域大于5n(100px)，我們的圖區(qū)不足以承 載。這時(shí)候我們可以同產(chǎn)品，設(shè)計(jì)師溝通協(xié)調(diào)，商議是否可以取消過(guò)大的按鈕設(shè)計(jì)。如果需求一定，那我們只能沿著X軸方向繼續(xù)擴(kuò)展畫(huà)布。不過(guò)，我們也需要注意 無(wú)限的放大一張畫(huà)布，同樣會(huì)造成對(duì)頁(yè)面效率的影響。

及時(shí)的制定好規(guī)范，記錄好修改日志

可能在項(xiàng)目的初期，我們還來(lái)不及制定合圖的具體規(guī)范，在項(xiàng)目中我們會(huì)遇到各種各樣的問(wèn)題。及時(shí)的總結(jié)，維護(hù)整張CSS拼圖，在拼圖的PSD或者PNG（使用Fireworks）做好注釋?zhuān)奖闼碎_(kāi)發(fā)。拼合好的圖片提交到svn時(shí)也寫(xiě)明log內(nèi)容，這樣便日后查詢(xún)。

我們最終的目的

其實(shí)CSSSprites經(jīng)過(guò)了那么多年的演變，前端開(kāi)發(fā)者不斷的優(yōu)化，都是為了提升頁(yè)面效率，提升團(tuán)隊(duì)開(kāi)發(fā)效率，減少開(kāi)發(fā)維護(hù)成本而努力。配合 最近非常流行的將CSS動(dòng)態(tài)語(yǔ)言化（如SASSLESS等），增加入變量，繼承，運(yùn)算，函數(shù)等。CSSSprites會(huì)變的更好玩，會(huì)減少更多 的開(kāi)發(fā)維護(hù)成本。甚至我們?cè)?ldquo;面向?qū)ο?rdquo;的模塊開(kāi)發(fā)方式中，還可以使用一個(gè)類(lèi)的的同一個(gè)backgroud-position：（xy）值，在不同的頁(yè) 面通過(guò)引用不同的圖片（background屬性）實(shí)現(xiàn)將一個(gè)頁(yè)面內(nèi)圖片請(qǐng)求量進(jìn)一步減少的目的。隨著高級(jí)瀏覽器的普及我們還可以多使用CSS3屬性，減 少漸變背景圖的使用，將純色I(xiàn)CON制作成字體取代拼圖等我們能更大程度上減少圖片的使用量。這篇文章只是拋磚引玉。實(shí)際上還有很多關(guān)于 CSSSprites的方法，還有眾多的拼圖生成工具。

說(shuō)了那么多，我們?nèi)绻谌粘５拈_(kāi)發(fā)中，只要我們多注意總結(jié)，敢于創(chuàng)新，敢于制定規(guī)范，那么再小的事也能干的很漂亮，對(duì)于CSSSprites的優(yōu)化就是這么一個(gè)例子，你說(shuō)不是么？