Question

let’s say I have a number of buttons. Each button has a different icon but all from the same sprite-sheet.

Now what I would like to know is, which is more efficient, browser-wise. Having each button styled via multiple small rules like this:

.icon {
    background-image: url('iconsheet.png');
}
.a-button {
    background-position: -x -y;
}
.b-button {
    background-position: -x -y;
}
.c-button { ...

<input class="icon a-button"> blabla ...

or is this better:

.a-button {
    background-image: url('iconsheet.png');
    background-position: -x -y;
}
.b-button {
    background-image: url('iconsheet.png');
    background-position: -x -y;
}
.c-button {
    background-image: url('iconsheet.png');
    background-position: -x -y;
}

<input class="a-button"> blabla ...

Please note that

1. The code is being created procedurally, so I’m only interested in effects for parsing, rendering etc, not in best coding practices.
2. This is just a toy-setting. In reality there are more combinations of different attributes at play (borders, font, etc).

Are there any benefits to having only a few, bloated rules apply to each tag that would outweigh having to serve up a much larger CSS file?

Thanks a lot!!

[EDIT]: Thanks for all your answers so far! To clarify, I am using SASS/SCSS. The *.scss files that I am working with are fine, readability-/maintainability-wise.

I am specifically interested in whether there is a performance benefit to having fewer individual rules per tag that would make it acceptable to have a bazillion-line css file at the end.

Answer 1

take a look here for different css styles and their performance
http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/