CSS Background Property - Shorthand vs Long form

Question

As I understand it, when you use the shorthand property background, the browser first sets all background properties to their default values and then puts in the values that you're declaring. Is it then better to use background-color:white; instead of background:white? Does this change when you are putting in more values such as background position or background image? Or is it always best to declare attributes individually?

I'm thinking that there must be some sort of tipping point where the savings in bytes balance the processing time gained by specifying attributes individually. However, I could be completely wrong - that's why I'm asking here.

Answer 1

The processing time of your CSS should be neglectable. If you're restraining from using them just because of that, well, don't restrain yourself anymore.

When using just a color, background: color and background-color: color should give the same result.

At then end it boils down to if you prefer shorthands to individual declarations. Usually, shorthands will use sensible defaults values, so it's all right. I usually don't remember the correct order for them (especially the font shorthand), but other than that I think they're fairly okay.

You might be using much more shorthand properties than you expect, anyways. For instance, margin and padding are the shorthands of their -top, -right, -bottom and -left components, and border is the shorthand for border-width, border-color and border-style, which are all shorthands for their border-[direction]-[attribute] properties. By using border instead of all the non-shorthand properties, you're saving like 11 lines.

Answer 2

I hear you about best practices, but as mentioned the differences in processing and even load time are negligible. There is no best practice for when to use these rules, aside from what makes sense in your stylesheet. The real difference is that they effect inherited properties differently. Setting background-color: white; will only overwrite the background-color rule (whether or not it was originally set with background or background-color) but background will overwrite the any/all background rules set, thus potentially killing background images and associated background-repeat, etc. Here's an example:

.box {
    background: url(star.png); // set with just background instead of background-image
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
}
.box1 {
    background-color: blue;
}
.box2 {
    background: green;
}

With HTML like:

<div class="box1 box"></div>
<div class="box2 box"></div>

.box1 will show the star.png image (with a blue background if the image is transparent), while .box2 will only show a green background, no image. The best practices lesson with these two rules is to evaluate CSS authoring and inheritance in general — not rendering performance. That in mind, it's generally best to apply background to the most general/abstracted rule of an element, and then overwrite properties on more specific instances, using classes or IDs, with background-color, background-image, etc.