Web Standards
CSS Reboot as a Validation Indicator
Applying a reset or normalize strips default styling and, in doing so, exposes the invalid markup you've been hiding.
Applying a reset or normalize strips default styling and, in doing so, exposes the invalid markup you've been hiding.
This is the archived edition of an earlier essay. The current, expanded version lives at CSS Reboot as a Validation Indicator.
Here's a diagnostic trick that costs one line of CSS: strip away every default style your browser applies and see what's left. A CSS "reboot" — a reset or a normalize — is usually pitched as a way to tame inconsistent browser defaults. But it has a quieter superpower. By removing the visual crutches that make sloppy markup look fine, a reboot exposes structural problems the browser had been politely hiding. It's an accidental validation indicator.
Browsers ship a built-in stylesheet — the user-agent stylesheet — that gives elements sensible defaults: headings get size and weight, lists get bullets and indentation, paragraphs get margins. A reboot overrides these, either aggressively (a reset, zeroing nearly everything) or surgically (a normalize, smoothing differences while keeping useful defaults).
/* the blunt classic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Once those defaults are gone, your document has nowhere to hide. Every bit of visible structure now comes from your CSS acting on your markup — and if the markup is wrong, your CSS has nothing correct to grab onto.
Consider the failure that browser defaults routinely mask. Suppose you accidentally put content directly inside a list without list items:
<ul>
Buy milk
Buy bread
</ul>With default styles, this might look passable — indented, roughly list-like — so you never notice the missing <li> elements. Apply a reboot that zeroes list styling and targets list items specifically, and the illusion collapses: the text loses its structure entirely because there are no list items for your rules to style. The reboot didn't create the bug; it stopped the browser from cosmetically covering it.
Default styles are a safety net. A reboot removes the net so you can see who was about to fall.
This shows up across all kinds of structural mistakes:
You can turn this into a habit. When something styles strangely and you can't explain why, don't immediately add more CSS — suspect the markup. A reboot is where you should already be starting a project anyway, precisely because it forces you to style intentionally rather than inherit accidents. If applying or tightening your reset makes the page fall apart, that's not the reset misbehaving; it's the reset telling you the truth.
Pair the technique with an actual validator for confirmation — the reboot points at the neighborhood, the validator names the house. But as a fast, free smell test, it's hard to beat. Take away the browser's cosmetic generosity, and your markup has to stand on its own structure. If it can't, you've just found your bug.