The HTML used a CSS class that was never defined. Three of them, actually.
Three separate visual bugs on my sites had the same cause: the HTML referenced a CSS class that didn't exist in any stylesheet.
No build error. No console warning. The markup was completely valid. The class just did nothing.
The three
1. .hero-visual — used on the homepage to center and constrain the hero image. Never defined. The image rendered at full width, uncentered, with no rounded corners.
2. .card-thumb — used on card thumbnails. Also never defined. One card had a portrait image (798×942) next to landscape ones (1192×941), so it stretched taller and the whole row looked broken.
3. Styles written after the closing </style> tag. During a redesign, about 460 characters of CSS got appended past the closing tag — including the rule that centered the hero image. The browser rendered it as body text. So the fix for bug 1 was sitting on the page as visible text instead of being applied.
Why nothing caught it
My pre-deploy check validated content, structured data, affiliate compliance, image alt text, and that CSS files return 200. All green.
What it didn't check: whether a class used in HTML is actually defined anywhere. A missing definition isn't an error — it's a no-op. Validators don't flag it.
The two checks I added
- CSS outside
<style>— look for{appearing right after a closing tag - Undefined classes — extract class names from HTML, confirm each is defined in a stylesheet
Both are cheap. Both would have caught this in seconds.
The third thing isn't automatable, and it's the one that actually matters: open the page and look at it after every deploy. Ten seconds. It would have caught all three.
If you want a second pair of eyes on your site: /