Accidental CSS Resets

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. I’ve seen it confuse people plenty of times. Let’s shine a light on the issue to hopefully make it more understood.

Here’s an example:

.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.

It works that way for every single one of the background sub properties:

.module {
  /* This will get set to `repeat` */
  background-repeat: no-repeat;

  /* This will get set to `0 0` */
  background-position: top right;

  /* This will get set to `auto auto` */
  background-size: 100px;

  /* This will get set to `scroll` */
  background-attachment: fixed;

  /* This will get set to `border-box` */
  background-origin: content-box;

  /* This will get set to `border-box` */
  background-clip: padding-box;

  /* This will get set to `transparent` */
  background-color: red;

  /* This will get overridden */
  background-image: url(cool.png);

  /* OVERRIDE */
  background: url(lion.jpg);
}

This is the case with box model (and related) stuff, like:

.module {
  margin-right: 20px;
  margin: 10px;
  /* margin-right will be 10px now */

  padding-top: 30px;
  padding: 10px;
  /* padding-top will be 10px now */

  border-left: 1px;
  border: 0;
  /* border-left will be removed */
}

Fonts is another situation where you can accidentally reset yourself:

p {
  /* Will get reset to what is set in shorthand (required) */
  font-family: Sans-Serif;

  /* Will get reset to what is set in shorthand (required) */
  font-size: 24px;
  
  /* Will get reset to `normal` */
  line-height: 2;

  /* Will get reset to `normal` */
  font-style: italic;

  /* will get reset to `normal` */
  font-weight: bold;

  /* will get reset to `normal` */
  font-variant: small-caps;

  /* OVERRIDE */
  font: 16px Serif;
}

Note that the shorthand requires at least the font-family and font-size to work.

Lists are yet another:

ul {
  /* Will get reset to what is set in shorthand */
  list-style-type: square;
 
  /* Will get reset to `outside` */
  list-style-position: inside;

  /* Will get reset to `none` */
  list-style-image: url(cooldot.png);

  /* OVERRIDE */
  list-style: disc;
}

The flex property as part of flexbox layout is also shorthand:

.flex >  span {
  /* Will be reset to `auto` (or `main-size` if supported) */
  flex-basis: 150px;

  /* Will be reset to `1` */
  flex-grow: 0;

  /* Will be reset to `1` */
  flex-shrink: 0;

  /* OVERRIDE */
  flex: auto;
}

This is an unusual one though, as rather than the shorthand resetting things you might not want reset, it resets them in ways you probably do want reset and might not even know it. Fantasai:

We (the Flexbox spec editors) strongly recommend not using the longhands of ‘flex’ unless you really, really want to cascade in flex settings from some other style rule, so I’d suggest somehow discouraging the use of ‘flex-grow/shrink/basis’ here (or, preferably, leaving it out/in an advanced section). The shorthand resets things in appropriate ways, and will therefore result in fewer cascading errors. Please use the shorthand!

Here’s a Pen with some of this stuff in real code.