optimize css render

[jfroffice]

Optimize css file rendering like this :

rather than

.icon-sprite1 {
  background-image: url('nested/dir/spritesheet.png');
  background-position: 0px 0px;
  width: 10px;
  height: 20px;
}
.icon-sprite2 {
  background-image: url('nested/dir/spritesheet.png');
  background-position: -10px -20px;
  width: 20px;
  height: 30px;
}
.icon-sprite3 {
  background-image: url('nested/dir/spritesheet.png');
  background-position: -30px -50px;
  width: 50px;
  height: 50px;
}

do

.icon-sprite1, .icon-sprite2, .icon-sprite3 {
  background-image: url('nested/dir/spritesheet.png');
}
.icon-sprite1 {
  background-position: 0px 0px;
  width: 10px;
  height: 20px;
}
.icon-sprite2 {
  background-position: -10px -20px;
  width: 20px;
  height: 30px;
}
.icon-sprite3 {
  background-position: -30px -50px;
  width: 50px;
  height: 50px;
}

[twolfson]

I thought about this during development but had some reason to go against it. I thought it was to allow for multiple spritesheets but in retrospect, that is not a valid reason. I am guessing I was half-awake at the time.

[jfroffice]

I think this is a matter of perspective.

But from a number of sprite the gain will be significant.

[twolfson]

Upon revisiting this, I realized why I did that. json2css is designed to be a module and agnostic to spritesmith or any higher level tool. As a result, developers should be allow to input multiple sprites with different background images at this level.

json2css([{
  image: 'img1.png',
  x: 0, y: 0, ...
}, {
  image: 'img2.png',
  x: 50, y: 50, ...
}]);

If I were to introduce any optimization (e.g. clump together all sprites with a common image to a common definition), then I am no longer doing one thing well. In fact, I am being a half-assed CSS optimizer. The purpose of this library is to be a JSON to CSS templating engine, nothing more.

As a result, I will be closing this issue and recommending you to a CSS optimizer which should take care of the redundant sprite troubles:

https://github.com/begriffs/css-ratiocinator

[jfroffice]

+1