CSS中为何采用继承方式设置box-sizing属性？

第一种给html根节点设border-box、所有元素继承的写法，核心优势是灵活性更高，支持低成本局部修改规则，比直接全量强制写死的方案可维护性强很多，主要差异有这几点：

• 改局部规则成本极低
  要是你项目里要引入第三方组件，人家组件默认是靠content-box做布局的，用继承方案的话，你只要给这个组件的外层容器加一句box-sizing: content-box;，它里面所有子元素、伪元素自动就跟着改成content-box了，完全不用动组件内部的代码。
  要是用第二种全量强制设置的写法，所有元素的box-sizing都是直接绑定死的，你要改这个组件的规则，要么得给组件里每个元素单独写样式覆盖，要么就得加类似.component-wrap *, .component-wrap *::before, .component-wrap *::after的选择器重新赋值，麻烦很多。
• 不会有优先级冲突的问题
  通配选择器*虽然优先级低，但直接赋值的规则优先级比继承来的规则高，要是你自己写的部分模块需要特殊的box-sizing规则，继承方案只要给元素本身或者上层父容器设一次就生效，不用考虑和通配选择器抢优先级。
• 渲染效率稍高
  继承方案不需要给每一个DOM元素单独匹配通配选择器赋值，直接从父节点拿属性就行，浏览器计算开销更小，当然这个差异在现在的浏览器里基本感知不到，主要还是前面两个优势。

内容的提问来源于stack exchange，提问作者Jackson Tai