Inheriting box-sizing Probably Slightly Better Best-Practice

Ich bin ein großer Fan davon, box-sizing auf border-box zurückzusetzen, so sehr, dass wir einen besonderen Tag im Jahr dafür haben. Aber es gibt eine kleine Anpassung beim Setzen, die eine ziemlich gute Idee zu sein scheint.

Hier ist die angepasste Version

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Die Idee der Vererbung verdanke ich Jon Neal hier, der sagt

Das gibt Ihnen das gleiche Ergebnis und erleichtert die Änderung des box-sizing in Plugins oder anderen Komponenten, die ein anderes Verhalten nutzen.

Um das weiter zu erklären: Nehmen wir an, Sie haben eine Komponente, die nur für die Arbeit mit dem Standard-content-box box-sizing entwickelt wurde. Sie möchten sie einfach nur verwenden und nicht daran herumfummeln.

.component {
  /* designed to work in default box-sizing */
  /* in your page, you could reset it to normal */
  box-sizing: content-box;
}

Das Problem ist, dass dies nicht die gesamte Komponente zurücksetzt. Vielleicht gibt es ein <header> innerhalb dieser Komponente, das in einer content-box-Welt erwartet wird. Wenn dieser Selektor in Ihrem CSS vorhanden ist, in der "alten Methode", ein box-sizing-Reset durchzuführen...

/* This selector is in most "old way" box-sizing resets */
* {
  box-sizing: border-box;
}

Dann ist dieser Header nicht content-box, wie Sie vielleicht erwarten, sondern border-box. Wie

<div class="component"> <!-- I'm content-box -->
  <header> <!-- I'm border-box still -->
  </header>
</div>

Um diesen Reset einfacher und intuitiver zu gestalten, können Sie den oben gezeigten Vererbungs-Snippet verwenden, und die Vererbung wird beibehalten.

Es funktioniert

Siehe den Pen Easy to Reset Box-Sizing von Chris Coyier (@chriscoyier) auf CodePen.

Das ist keine große Sache. Vielleicht verwenden Sie bereits den "alten" box-sizing-Reset und sind nie damit in Schwierigkeiten geraten. Das ist bei mir der Fall. Aber da wir ein "Best-Practice"-Snippet fördern, können wir es auch so gut wie möglich gestalten.