StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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 <code>background-color: white;</code> will only overwrite the <code>background-color</code> rule (whether or not it was originally set with <code>background</code> or <code>background-color</code>) but <code>background</code> will overwrite the any/all <code>background</code> rules set, thus potentially killing background images and associated <code>background-repeat</code>, etc. Here's an example:</p> <pre><code>.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; } </code></pre> <p>With HTML like: </p> <pre><code><div class="box1 box"></div> <div class="box2 box"></div> </code></pre> <p>.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 <code>background</code> to the most general/abstracted rule of an element, and then overwrite properties on more specific instances, using classes or IDs, with <code>background-color</code>, <code>background-image</code>, etc.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload