search

jorgebastida / glue

Glue is a simple command line tool to generate CSS sprites
http://glue.readthedocs.org
BSD 3-Clause "New" or "Revised" License
2.55k stars 169 forks source link

Improve CSS parsing performance #13

Closed teddyzetterlund closed 12 years ago

teddyzetterlund commented 12 years ago

For better browser parsing performance, and less bloat in the CSS, I recommend changing to the following CSS output format:

.sprite-icons-zoom_out,
.sprite-icons-zoom_in,
.sprite-icons-zoom,
.sprite-cions-xhtml_valid {
  background-image: url('icons.png');
  background-repeat: no-repeat;
}

.sprite-icons-zoom_out    { top: 0; left: 0; }
.sprite-icons-zoom_in     { top: 0; left: -16px; }
.sprite-icons-zoom        { top: -16px; left: 0; }
.sprite-icons-xhtml_valid { top: -16px; left: -16px; }

Reference: Different CSS techniques and their performance

Note: The OOCSS style is also a option but that would require changes to the HTML as well.

jorgebastida commented 12 years ago

Thank you very much Teddy, Just pushed to master :) https://github.com/jorgebastida/glue/commit/9d27c2fe08ce84c6985d588e1c3ef8fdb42e36cd

teddyzetterlund commented 12 years ago

Nice one! I did actually scan through the code before I created the commit to see if I easily could've done it myself but I'm not that used to Python and I was at work so I created the issue and though I could come back to it unless someone else took care of it :) I'll probably use this library this weekend!