在很久以前，icon還沒(méi)有統(tǒng)一的概念，設(shè)計(jì)師喜歡利用他們天馬行空般的想象力在需要的地方畫(huà)出自己喜歡的icon，這個(gè)時(shí)候前端的工作就是：
step1:在效果圖上找到icon，切割圖片

step2:上傳icon至服務(wù)器

step3:做為img元素或者背景來(lái)實(shí)現(xiàn)效果

……

在以前，大家開(kāi)始意識(shí)到icon作為網(wǎng)站中路標(biāo)性質(zhì)的東西理應(yīng)統(tǒng)一，雜亂的icon不僅使用戶茫然，還使得網(wǎng)站的開(kāi)發(fā)、維護(hù)成本大大增加。于是就有了全站統(tǒng)一的icon以及與之配套的使用規(guī)范：

這個(gè)時(shí)候前端做的是：

step1：找到需要使用的icon，獲得線上url

step2: 做為img元素或者背景來(lái)實(shí)現(xiàn)效果

……

相比很久以前，這種方法統(tǒng)一了icon，統(tǒng)一了icon地址，不需要再為更改某個(gè)icon而抓狂。但是卻給css sprite帶來(lái)了一個(gè)問(wèn)題！因?yàn)槊總€(gè)icon的url都分開(kāi)，加載頁(yè)面時(shí)會(huì)有N多的http請(qǐng)求，一下子使原本牛B的頁(yè)面變成牛D甚至牛E。于是大家都開(kāi)始把這個(gè)唯一的url作為獲取icon的簡(jiǎn)便途徑，icon圖片本身還是合并在頁(yè)面整體的背景圖里面。但這樣一來(lái)，icon的維護(hù)成本有高了。

思考：既然網(wǎng)站已經(jīng)開(kāi)始統(tǒng)一icon，那何不將所有icon合并在幾張背景圖上來(lái)方便調(diào)用呢？

嘗試開(kāi)始：

已有規(guī)范1：中文站目前絕大多數(shù)的icon是12px和16px兩種，其中12px的icon是指高度為12px，寬度12px左右（不一定12px），見(jiàn)上圖說(shuō)明，16px的icon寬高都為16px；

已有規(guī)范2： 中文站目前主要正文字號(hào)就12px和14px兩種；

已有規(guī)范3：中文站目前行高主要是1.5倍和1.8倍兩種；

已有規(guī)范4：中文站目前的間距是8px；

基于以上規(guī)范，我們把全站的icon分成3類，按照一定的規(guī)律排布在3張不同的背景圖片上,每張圖片大小不超過(guò)15k,如下圖所示：

每個(gè)icon都有12px和16px兩個(gè)版本，兩個(gè)版本排在一行上， 上下每行間距40px。縱向第一排icon都是12px大小的，每個(gè)icon的中心對(duì)齊在距圖片左邊14px的線上，縱向第二排icon以416px中心線對(duì)齊。==，這些數(shù)字是怎么來(lái)的？

首先、40px和400px只是經(jīng)驗(yàn)值，熟悉css sprite的人都知道給icon留空隙用的，對(duì)于目前的中文站來(lái)說(shuō)這些預(yù)留的空隙可以滿足絕大多數(shù)的需求。

其次、14px的由來(lái)是因?yàn)橐延械囊?guī)范1和規(guī)范4，icon寬度12px左右同時(shí)間距為8。即指icon距文字起始處8px，和文字的間距也是8px（從這里開(kāi)始–8px–假設(shè)為12px的icon–8px–文字文字）。所以icon的中心一定是在8px+8px+12px/2=14px，16px同理為8px+8px+16px/2=16px。這樣就可以保證icon在橫方向的對(duì)齊。

最后、icon在縱向上的對(duì)齊則在預(yù)設(shè)的css中完成，根據(jù)已有的規(guī)范2和規(guī)范3，我們可以為每個(gè)icon設(shè)置兩種class，分別對(duì)應(yīng)行高為16px（12px*1.5）和22px（12px*1.8）的情況。

這樣一來(lái)，我們就可以通過(guò)預(yù)設(shè)class的方式把網(wǎng)站的icon全部整理完畢。調(diào)用時(shí)只需要將相應(yīng)文本display屬性設(shè)為block，然后根據(jù)情況為他添加2個(gè)class名即可：

調(diào)用示例：

1
2
3
4
5

<ul>
	<li class="icon-a p120018">我是一個(gè)icon</li>
	<li class="icon-c p160018">我是一個(gè)icon</li>
	<li class="icon-c p120222">我是一個(gè)icon</li>
</ul>

class名說(shuō)明：

class名說(shuō)明1、第一個(gè)class（如”icon-a”），需要使用的icon所在的背景圖。icon-a:箭頭相關(guān)的icon集合；icon-n:數(shù)字相關(guān)的icon集合；icon-b：品牌相關(guān)的icon集合；icon-c：通用普及類icon

class名說(shuō)明2、第二個(gè)class（如”p120222″）指明了具體使用的icon和對(duì)應(yīng)的文本的行高。由”p”+”6位數(shù)字組成”。6位數(shù)字的前2位指明了該icon的大小。有12和16兩種可選；中間2位數(shù)字指明了該icon在背景圖中的縱向位置；最后2位表示所處文本的行高，有18，21，22，26四種可選。

class名說(shuō)明3、所有的icon以背景圖的形式存在于已合并的4張icon圖片中。如果需要使用的文本的行高不在已經(jīng)預(yù)先定義的行高中則需要自行設(shè)置背景圖片的background-position。

icon及class對(duì)照表：

最后一步的工作簡(jiǎn)單而重要，我們需要把每個(gè)icon和他的class名一一對(duì)應(yīng)起來(lái)做一個(gè)方便查閱的表：

搞定！

這樣一來(lái)，前端的工作流程將變成：

step1：在表中找到需要的icon

step2：填寫(xiě)class名

簡(jiǎn)單粗暴，快速提高前端的開(kāi)發(fā)效率，符合我們的特色，呵呵。

當(dāng)然，這個(gè)辦法只能解決目前我們網(wǎng)站上80%左右的icon的問(wèn)題，在右邊的icon，16px以上的icon等等都無(wú)法試用。另外，這個(gè)做法本身也有很大的問(wèn)題，性能、維護(hù)等等…在整個(gè)alib體系中，icon這塊是提升效率最大，同時(shí)也是爭(zhēng)議做多的一塊。取舍，是人生路上永遠(yuǎn)存在的難題。

PS：alib是09年中文站UED主要為提升前端開(kāi)發(fā)效率而定的一整套規(guī)范和框架，接下來(lái)將慢慢地分享一些其中的思想和做法，大家慢慢拍。

來(lái)源：http://f2e.me/archives/149