CSS sprites，分配类名

Question

哪个更合适。

（a）有一个公共类“精灵”，它将始终与另一个类一起用于选择坐标，或者（b）简单地将相同的属性分配给一个类列表？

（a）这更有意义，因为它只是更少的代码，可能更快。不足之处在于，这引入了（理论上）仅CSS开发人员与HTML交互的需求。

.sprite { background: url('[..]') no-repeat; display: block; }
.sprite.a { background-position: [..]; }
.sprite.b { background-position: [..]; }

（b）中

.a,
.b { background: url('[..]') no-repeat; display: block; }
.sprite.a { background-position: [..]; }
.sprite.b { background-position: [..]; }

我忘了什么吗？我应该使用哪一个？

Answer 1

我会使用sprite类来选择背景图像（以及可能的其他常见属性，例如大小如果所有精灵都具有相同的大小），然后选择仅指定背景位置的其他类。

这样可以保持样式表的可读性和更小，因为您不必一直重复您的类名。