optimize css render #11

Closed
jfroffice opened this Issue Jun 12, 2013 · 4 comments

Comments

Projects
None yet
2 participants
@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

This comment has been minimized.

Show comment
Hide comment
@twolfson

twolfson Jun 12, 2013

Owner

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.

Owner

twolfson commented Jun 12, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jfroffice

jfroffice Jun 12, 2013

I think this is a matter of perspective.

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

I think this is a matter of perspective.

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

@twolfson

This comment has been minimized.

Show comment
Hide comment
@twolfson

twolfson Jun 13, 2013

Owner

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

Owner

twolfson commented Jun 13, 2013

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

@twolfson twolfson closed this Jun 13, 2013

@jfroffice

This comment has been minimized.

Show comment
Hide comment

+1

@twolfson twolfson referenced this issue in twolfson/grunt-spritesmith Dec 3, 2014

Closed

Duplicated background images #99

@twolfson twolfson referenced this issue in twolfson/grunt-spritesmith Jan 15, 2016

Closed

zero-units #156

@twolfson twolfson referenced this issue in twolfson/spritesmith Jan 25, 2016

Closed

Disallow units for zero values #61

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment