继承盒模型可能略微更好

我非常喜欢将 box-sizing 重置为 border-box，以至于我们在今年专门为它设立了 一个特殊的日子。但是，在设置它时有一点调整似乎是个好主意。

这是调整后的版本

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

关于继承想法的功劳归于 Jon Neal 此处，他说

这将为您提供相同的结果，并且使在利用其他行为的插件或其他组件中更改盒模型变得更容易。

进一步解释，假设您有一个组件，它只是被设计为与默认的 content-box box-sizing 一起使用。您只想使用它，而不是弄乱它。

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

问题是，这实际上并没有重置整个组件。也许该组件中有一个 <header> 期待处于 content-box 世界中。如果此选择器在您的 CSS 中，以“旧方式”进行 box-sizing 重置……

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

那么那个标题就不是您期望的 content-box，而是 border-box。就像

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

为了使该重置更容易和更直观，您可以使用上面顶部的继承片段，并且将保留继承。

它有效

查看 CodePen 上 Chris Coyier 的 Easy to Reset Box-Sizing（@chriscoyier）。

这不是一件大事。您可能已经在使用“旧方式”的 box-sizing 重置，并且从未被它咬到过。对我来说就是这样。但是，只要我们在推广“最佳实践”风格的代码片段，我们不妨将其磨练成最好的状态。