css sprites该如何书写类名呢?

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

另一种是像支付宝一样

哪一种比较好呢?

2014年1月27日补充:

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

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

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

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

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

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

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

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

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

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

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

  • 求推荐 移动网页设计与开发相关的学习笔记谢谢~~~~~~~~
  • 移动网站里面后台嵌入第三方文章,样式会互相影响,怎么解决互不影响?
  • IE8控制台中找不到相应的页面元素
  • 如何针对网站结构、内容、优点、缺点、进行优化?
  • 绝对定位问题
  • 怎么实现网页音乐(视频)播放器在切换网页时音乐不中断?
  • 移动端图片优化
  • gulp 使用 testAutoFx 添加前缀后,再使用gulp-minify-css压缩文件,无法正常压缩
  • 点击span时不让li触发active,只触发span的active
  • vue+element UI中selecter总是显示初始值,不显示placeholder值
  • 点击左右箭头,图片跟随移动,正中的图片始终最大