我最近开始使用图像精灵，它们绝对非常适合减少http请求。是否存在变得不好的做法？
我特别想到必须添加许多额外标记才能支持它们。例如，使用它们作为列表项目符号点，我必须添加两个或三个额外的跨度来获取所有对齐等。
Theres也是令人讨厌的一点，你不能使用重复的图像，所以总是在作为精灵的一部分的一个大图像或用于重复下载的微小的1像素图像之间折腾。
我真的在寻找关于这里概述的两种情况的观点+使用精灵的任何其他一般考虑因素/指南。
答案 0 :(得分：2)
它们通常会导致移动设备出现性能问题。我不是100％肯定为什么（从来没有真正深入研究过这个问题），但我认为这是因为移动webkit正在为页面上的每个实例将一个相对较大的图像的新副本加载到内存中。由于移动设备通常具有非常少量的RAM，因此很快就会导致页面速度变慢。
我曾经遇到过这个问题，之前一次在一个页面上有大约300个“图标”精灵，每个精灵从一个包含大约50个不同图标的精灵图像中拉出来。回到每个图像一个图标的“正常”方法（或悬停状态2-3个）解决了这个特定页面上的性能问题。
此外，当您稍微调整页面内容的大小时（例如，在浏览器本身上使用“放大/缩小”），许多浏览器（移动设备和其他浏览器）通常不会100％尊重精灵的剪辑。你经常会在你想要使用的精灵旁边看到精灵的一小部分。
至于你的子弹示例，你不应该需要多于一个div / span。您可以在margin-left上设置li，并将“bullet div”放置在它创建的空白区域中。
话虽这么说，我一直都在使用精灵因为它们很方便，只要注意它们的一些问题。一般来说，我有sprites.png，sprites_h.png和sprites_v.png用于水平和垂直重复的部分。
答案 1 :(得分：0)
编写两个简单的测试页，在一个上使用精灵，而在另一个上使用精灵。使用http://www.webpagetest.org/之类的工具来衡量几种不同浏览器的效果。获得数据后，您就可以做出决定。
答案 2 :(得分：0)
我会通过相关元素划分精灵，比如导航和与内容相关的精灵，这样你就可以从精灵中受益并在代码中保持逻辑顺序。不要忘记，可读和可理解的代码应该是一个优先事项（特别是对于CSS，它可能会变得非常混乱），除非您正在处理Google规模的项目。