Why do CSS resets apply `box-sizing: border-box` through `*, *::before, *::after` rather than on `html` alone, and when would you use the `box-sizing: inherit` variant instead?

## What the reset is The rule near the top of nearly every stylesheet is: ```css *, *::before, *::after { box-sizing: border-box; } ``` It exists because the CSS default, `content-box`, makes `width` describe only the innermost box, so padding and border push elements past their declared size and percentage layouts overflow. `border-box` matches how most people think about a box, so teams opt the whole document into it. ## Why not just `html { box-sizing: border-box }` Because `box-sizing` is **not an inherited property**. CSS splits properties into inherited ones (`color`, `font-family`, `line-height`) and non-inherited ones (`display`, `border`, `box-sizing`); a non-inherited property takes its **initial** value on every element where nothing declares it. Setting it on `html` therefore styles exactly one element — the root — and every descendant still computes `content-box`. Only a selector that *matches* each element can change them all, and that is what `*` is for. ## Why `::before` and `::after` are listed The universal selector matches **elements**. Pseudo-elements are not elements: they are boxes the engine generates for a `content` declaration, and no simple selector reaches them implicitly. If you omit them, a decorative `::after` with padding and a border sizes under `content-box` while its host sizes under `border-box`, producing exactly the one-off misalignment that is miserable to debug. Listing the two common generated-content pseudo-elements keeps the whole box tree on one model. ## Specificity: the reset is deliberately weak The universal selector contributes **zero** to specificity, so `*` has specificity 0-0-0 and `*::before` only counts the pseudo-element (0-0-1). Any class rule beats it. That is a feature: the reset is a default, not a mandate, and any component can opt out with a normal rule. It is also why the reset does not need `!important` — reaching for that is a red flag, since it converts a friendly default into something a component author cannot escape. A related myth worth rebutting: the universal selector is not a performance problem. Selector matching in modern engines is right-to-left and heavily optimised, and one declaration on every element is not a measurable cost. ## The `inherit` variant and what it buys ```css html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } ``` The computed result for a clean page is identical: the root is `border-box`, and every element explicitly inherits from its parent, so the value cascades down the tree. The difference is what happens when you want to *stop* it. With the plain reset, every element was independently set to `border-box`, so flipping a subtree back means matching every element in it: ```css .legacy-widget, .legacy-widget * { box-sizing: content-box; } ``` With the `inherit` variant, one declaration on the subtree root is enough, because the descendants inherit from it: ```css .legacy-widget { box-sizing: content-box; } /* whole subtree follows */ ``` That is the entire argument. The trade is a small extra indirection — a reader has to notice the property is being forced to inherit — in exchange for a clean per-subtree override. Codebases that never integrate foreign markup usually keep the plain reset; codebases that embed third-party widgets, editor output, or legacy pages benefit from the inheritable one. ## When the reset causes trouble The realistic failure is a third-party widget whose stylesheet was authored assuming `content-box`. Its author wrote `width: 240px; padding: 12px` expecting a 264px panel; your global reset silently makes it 240px, and the internals cramp or clip. The targeted fix is to restore `content-box` for that subtree only, using whichever of the two forms your reset supports. Two further options are worth naming: putting the reset inside a cascade layer so widget styles that live in a later layer win regardless of specificity, or — where the widget is genuinely hostile to the host page — letting it render inside its own document. A second, quieter effect: some user-agent stylesheets set `box-sizing` on particular form controls, so a `*` reset also normalises those, which is usually why inputs and text areas finally line up with everything else after the reset lands. ## Answering it Lead with the fact that drives everything — `box-sizing` is not inherited — then the pseudo-element detail, then the specificity-zero point, and finish with the `inherit` variant framed as a per-subtree escape hatch rather than as a better default.