Versehentliche CSS-Resets

Immer wenn Sie eine Kurzschreibweise (Shorthand-Property) in CSS verwenden, legen Sie *alle* Werte für alle Eigenschaften fest, die diese behandelt. Das ist kein Bug, sondern einfach die Funktionsweise von CSS. Ich habe schon oft gesehen, wie dies Leute verwirrt hat. Lassen Sie uns das Problem beleuchten, um es hoffentlich besser verständlich zu machen.

Hier ist ein Beispiel:

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

Die CSS-Kurzschreibweise background überschreibt alle Untereigenschaften. Der Standardwert für background-repeat ist repeat, also wird er auf diesen Standardwert gesetzt, wenn er nicht in der Kurzschreibweise deklariert wird.

Das funktioniert bei jeder einzelnen Hintergrund-Untereigenschaft so.

.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);
}

Dies ist auch bei Box-Modell (und verwandten) Dingen der Fall, wie zum Beispiel

.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 */
}

Schriften sind eine weitere Situation, in der Sie sich versehentlich zurücksetzen können.

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;
}

Beachten Sie, dass die Kurzschreibweise mindestens font-family und font-size benötigt, um zu funktionieren.

Listen sind noch ein weiterer Fall.

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;
}

Die Eigenschaft flex als Teil des Flexbox-Layouts ist ebenfalls eine Kurzschreibweise.

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

Das ist jedoch ein ungewöhnlicher Fall, da die Kurzschreibweise nicht wie üblich Dinge zurücksetzt, die man nicht zurücksetzen möchte, sondern sie auf eine Weise zurücksetzt, wie man es wahrscheinlich möchte und vielleicht nicht einmal weiß. Fantasai

Wir (die Redakteure der Flexbox-Spezifikation) empfehlen dringend, die Langschreibweisen von 'flex' nicht zu verwenden, es sei denn, Sie möchten wirklich, wirklich Flexbox-Einstellungen von einer anderen Stilregel übernehmen. Daher schlage ich vor, die Verwendung von 'flex-grow/shrink/basis' hier irgendwie zu unterbinden (oder, vorzugsweise, sie wegzulassen/in einem erweiterten Abschnitt zu platzieren). Die Kurzschreibweise setzt Dinge auf angemessene Weise zurück und führt daher zu weniger Kaskadenfehlern. Bitte verwenden Sie die Kurzschreibweise!

---

Hier ist ein Pen mit einigen dieser Dinge im echten Code.