My 60-point pre-deploy check passed. The homepage was still broken.
I have a 60-point pre-deploy check. It validates content structure, FAQ coverage, schema markup, affiliate link compliance, image alt text, OG tags, CSS references.
Every site passed all 60 points.
Then someone opened the homepage and found raw CSS rendering as visible text at the top of it.
What was actually broken
Four separate visual bugs, all invisible to my checks:
-
Raw CSS as body text. A
</style>tag closed early, so ~460 characters of stylesheet sat outside it — displayed as text instead of applied. This included the rule that centered the hero image, which is why the hero image wasn't centered. -
A CSS class with no definition. The homepage used
.hero-visual, but that class wasn't in the stylesheet at all. The image had no width constraint and no centering. -
Another class with no definition. Card thumbnails used
.card-thumb, also undefined — so a portrait image (798×942) stretched its card taller than the landscape ones next to it. The row looked broken. -
Stale CSS cache. Fixing the stylesheet did nothing until I bumped the version parameter in the
<link>tag.
The pattern
Three of the four are the same mistake: the HTML uses a class, the CSS never defines it. Typo, incomplete copy-paste during a redesign, a code block pasted past the closing tag. All of it renders fine as far as a validator is concerned — the markup is valid, the class just does nothing.
What I changed
- A check for CSS sitting outside
<style>tags (looks for{immediately after a closing tag) - A check that every class used in HTML is actually defined somewhere in the CSS
- And the one that mattered most: open the page after every deploy.
That last one isn't automatable in a useful way — and it would have caught all four bugs in about ten seconds.
I do site builds and SEO diagnostics if you want a second pair of eyes: /