Why do we need to be careful when using shorthand properties in CSS?

Any time you use a shorthand property in CSS, you set all the values for all the properties it deals with. It’s not a bug, it’s just how CSS works.

.module {
  background-repeat: no-repeat;
  background: url(lion.jpg);
  /* Oops! This will repeat. */
}

The shorthand CSS background property overrides all the sup properties. The default value for background-repeat is repeat, so by not declaring it in the shorthand, it gets set to that default value.

Source: https://css-tricks.com/accidental-css-resets/