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