Question

Lets say i use the shorhand background property defining multiple properties..eg:

.img
{
    background: url('/Content/images/a.png') no-repeat scroll 100% 3px;  
}

If i now want to override just the background-postion of the image, should I use the full shorthand notation with the updated position like:

.img
{
  background: url('/Content/images/a.png') no-repeat scroll 0 3px;  
}

or just override the background-position property like:

.img
{
   background-position: 0 3px;  
}

If so, what are the issues? Is there a slight performance gain by only overriding the position?

Answer 1

Just override the property you need. In fact, this technique is very often used in so-called CSS Sprites:

[class*=" icon-"] {
  background: url("../img/glyphicons-halflings.png") no-repeat scroll 14px;
}

.icon-glass {
  background-position: 0 0;
}

.icon-music {
  background-position: -24px 0;
}

.icon-search {
  background-position: -48px 0;
}

This approach (you first define a generic full rule, then specify it for each particular class with a shorthand rule) has two obvious advantages:

• it’s quite shorter (…than when you repeat full definitions with one property updated), so the CSS file would be smaller
• it’s also quite readable (no-one would have to guess whether you’ve overwritten some prior rule by error).