黃鑽等級圖示處理引發的思考

最近在處理Qzone黃鑽圖示更新時，想起近期對業務圖示進行優化所遇到的一些問題，把思緒收拾起來和大家一共探討，歡迎多方聲音。

在實際工作中，圖標類別的應用非常廣泛，如同陣列般的等級圖示更顯其特殊性。以下要共同探討的兩個方向，以什麼方式實現及怎麼更好在貼近專案實際更好地實現並供應用。

假設：業務的用戶等級共有10個，加上大小2種視覺尺寸的圖標，還有「過期未續費用戶」的表現，共有38個圖標需要入庫供調用（如下圖）。

在專案的CSS框架研發中，會有幾個key作為考慮：請求數、程式碼量、相容性、圖片檔案大小、是否可並為元件模組且方便邏輯性實作。

1. 眾多不同等級的圖標在不同方式的廣泛應用時，是否會產生過多的文件請求；
2. 等級圖示的程式碼在實作上是否會使用過多的程式碼，且頁面上真實應用的只是少量程式碼，從而造成程式碼臃腫；
3. (x)html+css輸出的圖示套用到頁面中，是否和頁面上其它元素相容，否則將為達到相容目標而增加一系列程式碼；
4. 若各圖示合併後，權衡項目應用的實際情況，圖像檔案是否會過大而消耗頻寬；
5. 圖示的HTML固定，className命名中的某個數字命為作為變量，透過修改變數來達到表現效果。

出處：騰訊Webteam