CODEWITHSUNDEEP
htmlcss
HumanCatfood
HumanCatfood

Reputation: 1001

CSS - many small rules vs. few large rules

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.

Upvotes: 7

Views: 263

Answers (6)

infinityLoop
infinityLoop

Reputation: 366

I think another factor would be if anyone else would be using and editing your code. You would probably remember that you have all the additional rules embedded into the other classes but it would probably be easier for someone else to read exactly what classes are being used for an element.

While I don't doubt that performance increases are important, several bytes in today's world seems like we are trying to count grains of sand on a beach. I think it's more important to write maintainable and readable code over trying to shave down the code. Again, highly subjective depends on who and how the code is being used.

Upvotes: 0

damoiser
damoiser

Reputation: 6238

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

Upvotes: 1

AJStacy
AJStacy

Reputation: 5233

Your first answer is definitely the most efficient way of doing it. Either way you do it you will get the same result, but in your first example you're saving lines of code in your css. This is a very small performance increase over your second answer, but it is still better.

Also, think about it in this light. If you change the sprite sheet or rename it wouldn't it be much easier to change 1 path rather than 3 paths?

Now, if you are needing to use a script to parse information from your css file, then by all means use your second answer.

Conclusion: The only difference will be the size of your css file which is negligible.

Upvotes: 0

Armen Michaeli
Armen Michaeli

Reputation: 9139

When in doubt, go for smallest code (try to retain readability too).

The browser will have less to parse, and that's a good thing. The style computation tree will be smaller, and if the browser caches computed styles then it doesn't matter anyway how say a particular A got it's color - from a[href], a or a.link or .link or whatever.

My answer is intentionally vague, because CSS does not specify parsing strategy, a browser is free to implement CSS whichever way it prefers. Some browsers pride themselves in using least memory, and some do in having fastest page processors. Smallest code will however win you followers among people who will have less to read, and among computers who incidentally also understand things by... "reading".

Upvotes: 0

Matthew Layton
Matthew Layton

Reputation: 42229

I don't think there's any right or wrong answer here...Both examples would work.

From personal experience I think I would be likely to pick the first example on the basis that the CSS is slightly smaller. Remember when you're working with the web, every byte counts, so ideally you want to slim down your code as much as possible, and in that respect its always good to minify your CSS before you release it (http://www.minifycss.com/)

Another thing you could try is SASS / SCSS. Build your style with SASS code and see how it drills down to standard CSS. (http://sass-lang.com/)

Upvotes: 0

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174947

Well, if those buttons also fit in the role of an .icon, the multiple classname solution is perfectly fine.

When coding CSS, don't think of performance or file-size, think of what makes sense. If it makes sense, it would be efficient.

Upvotes: 4

Related Questions