Stablo
🌐 EN , Change language

Craft

Measuring instead of claiming

A stylesheet is a set of claims. Each rule says that when this pattern appears, these properties apply. The trouble is that a claim can be false and still look entirely reasonable in the file.

A rule that matched nothing

Consider a rule meant to put space between paragraphs:

.prose > * + * { margin-top: 2.5em; }

It reads correctly. It is also inert when the generator wraps rendered Markdown in an element of its own, because then the paragraphs are not children of .prose — they are grandchildren, and the child combinator does not reach them.

Nothing complains. The stylesheet parses, the page renders, and the spacing is simply absent. The only way to find it is to ask the browser what it actually computed:

getComputedStyle(paragraph).marginTop

Zero, where the design called for forty pixels.

Why review does not catch this

Reading a diff tells you what a rule says, not whether it applies. Both require knowing the shape of the DOM the rule will meet, and that shape is decided somewhere else — by a generator, a component, a wrapper added six months ago for an unrelated reason.

A rule you have read is not a rule you have verified.

Measure the output, not the source

The useful checks all share a shape. They load the built page in a real browser, ask it what it painted, and compare that against the claim:

Claim What to measure
Text meets a contrast ratio The computed colour against its actual background
Nothing overflows on a phone Every element's horizontal extent at that width
Focus is never hidden Which element a click would hit, at the focus ring

None of these can be answered from the source. All of them can be answered in a few lines against the output.