css sprites该如何书写类名呢?

听海JamiE
  • 522

假设所有图片都集合到了all.jpg中,
那么有两种选择,一种是定义一个类名
.all_img { background: url(all.jpg)}
在需要的元素上添加.all_img这个类名

另一种是像支付宝一样
请输入图片描述

哪一种比较好呢?

2014年1月27日补充:

题主水平很low,可能问的问题没什么水平。但是我这样一个简单的问题居然因为举例时提到支付宝而戳中某些人G点。
高手觉得问题太低级可以不回答,没必要扯那么多没用的,只会让人看不起你。

回复
阅读 4.3k
5 个回答

各位毕竟推荐的是语义化的css写法。
我比较推崇的是后者。

我们使用sass的compass,合成的图是compass生成的,名字看起来好像是随机生成的

支付宝的雪碧图和css都是编译后的,不用手工合并图片与修改css

风格是自动的,跟原文件中未必一样

你需要用自己喜欢的写法和找到喜欢的编译器

其实差别可能不大吧,这取决于个人习惯。

如果真的要比较的话,两种写法我更偏向于后者,因为后者更有利于维护。

可以想象的是,如果在每一个需要用到Sprites图的元素加一个.all_img类名,那么对于后期做小范围修改的成本肯定是前者比后者高的。

例如.topbar类因为某种原因不需要用到Sprites图了,那么取消background-image属性肯定是后者比前者快的。因为前者需要找到相应元素,而后者只需要找到对应类名。当然,如果用LESS或者SASS的话,这种比较就没有任何意义了。

根据用途命名。
例如是用作赞转评的操作icon雪碧图,就叫optBtn.png
用作分享社交工具icon雪碧图,就叫shareBtn.png
等等等...
最好不要用all,因为all意味着所有雪碧图的合集。
但是一个网站往往好多处雪碧图

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏