使用CSS Sprites就好像玩拼圖游戲一樣
在大家還在撥號上網(wǎng)的“遠古時期”，由于網(wǎng)速的限制，頁面開發(fā)者都喜歡把網(wǎng)頁里面的圖片字節(jié)數(shù)控制的非常小，往往在一個圖片文件夾里散落著n多的小碎圖。隨著網(wǎng)絡技術的發(fā)展，網(wǎng)速的提升，大家越來越重視頁面的加載速度、頁面效率問題，過去的那些小圖便成為了前端開發(fā)者的眼中釘，因為每加載一張圖片都會產(chǎn)生一次瀏覽器請求數(shù)，發(fā)起的請求數(shù)越多那么頁面加載的速度也越慢。還有當頁面加載時，圖片一個個的零星顯示，鼠標經(jīng)過時候背景閃白等也都是我們不能忍受的。于是乎將頁面中的背景圖整合到一起，利用“background-image”，“background- repeat”，“background-position”的組合進行背景定位的技術被廣泛使用與了頁面構建中，這就是CSS Sprites。當然CSS Sprites技術也存在著維護不便，內(nèi)存占用大等等的缺點。
上面這些只是對CSS Sprites技術的一個普及。作為一個開發(fā)者我們應該對它有一個更全面的認識，挖掘深度內(nèi)容，這樣才能有利于我們效率開發(fā)，團隊協(xié)作。
頭疼的多人拼圖游戲
使用CSS Sprites，就好像玩拼圖游戲一樣。一張白畫布，那么多圖怎么放到里面去才會完美？這是個讓人糾結(jié)的事。而且在實際在工作場景中，我們面臨著項目開發(fā)時間緊張，UI設計圖要分期提供，多人協(xié)同開發(fā)一個項目等等問題。這些問題非常容易讓我們在大項目中迷失，造成CSS拼圖混亂，維護及其困難的情況。
定好規(guī)則，其實拼圖也挺好玩的。
先期的準備工作
應對一個項目后期維護成本大的問題，我們最好的解決方案就是在開始前制定一系列的規(guī)范來限制問題的產(chǎn)品。好的開始是成功的一半。對于CSS Sprites，在項目開始前，我們要充分認識一個產(chǎn)品，同UI設計師做好良好的溝通，對我們未來組成我們Sprites圖的各個元素有個大體的概念，比如我們的背景拼圖可能包括什么。
一個好的Sprite畫布是必須的
網(wǎng)頁設計里面，Grid系統(tǒng)是必不可少的，好的Grid能解決我們很多排版問題。Grid系統(tǒng)同樣適用于CSS Sprites。我們需要創(chuàng)建好一個優(yōu)秀的畫板，剩下的工作就是將元素合理的置于畫板中了。