jorgebastida/glue — Issue #13: Improve CSS parsing performance
Author: teddyzetterlund
Created: 2012-01-11 11:06:47+00:00
State: open

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

```css
.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](http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/)

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