Sprites画布有了，接下来就是对图标进行分组了对于信息的归纳总结、分类是一个有意思的事情。就拿图标来说，我们就可以根据图标功能，尺寸等等作为信息维度进行归纳。其实无论怎么归纳，都是可以的，只是记得我们以一个方向作为标准就可以了。
下图是根据微博站外某组件完成的CSS Sprites
根据设计，我们了解在这个页面，需要将图片元素根据功能分为4个维度，即微博品牌展示元素、提交按钮、操作类小按钮、提示类ICON。于是我将画布 X轴坐标方向每5个格(其实完全可以10个格或者更多)划分为一个区域，每个这样一个区域的Y轴方向不再划分区域，这样做的目的是为了以后增加图标的扩展性。于是我们可以非常快速得到一个图标的坐标了。比如不可用的灰色的分享按钮 X坐标=5*20px=100px Y坐标=7*20px=140px; 那么我们就取得了这个图标的位置即background-position: -100px -140px。如果抽象成为公式的话，我们设置一个单元格的宽度为变量n。X坐标值Gx,Y坐标值Gy。那么画布中的元素css背景即为：background-position:-Gx*npx –Gy*npx 了。现在图有了，怎么取图也是关键
因为图片尽可能的被整合到一张拼图，所以我们需要在页面使用图片的位置使用空标签定位的方式将拼图所需展现的部分展示到页面中。
.iconA { display:inline-block; height:16px; width:16px; background:url(icons.png) -20px -20px no-repeat }
项目出现二期需求了，需要增加图标?
需求总是不能控制，我们要尽可能的为未来增加图片做好打算。在刚才的例子的项目里后期产品需要增加图标，于是：
我们可以继续在对应的图区内增加对应的图标。但是这个例子同样暴露了一个缺陷，如果新增一个按钮区域大于5n(100px)，我们的图区不足以承载。这时候我们可以同产品，设计师沟通协调，商议是否可以取消过大的按钮设计。如果需求一定，那我们只能沿着X轴方向继续扩展画布。不过，我们也需要注意无限的放大一张画布，同样会造成对页面效率的影响。及时的制定好规范，记录好修改日志
可能在项目的初期，我们还来不及制定合图的具体规范，在项目中我们会遇到各种各样的问题。及时的总结，维护整张CSS拼图，在拼图的PSD或者PNG(使用Fireworks)做好注释，方便他人开发。拼合好的图片提交到svn时也写明log内容，这样便日后查询。
