Skip to content
All notes

15 pages, 15 style blocks, 8 font stacks

Note 11 of 12
  • #css
  • #audit
  • #rebuild

Counted the CSS across the old guides before touching the design. 252 of 391 class names appeared in exactly one file.

Before redesigning anything I wanted a number, not an impression. So I counted.

15 pages. 15 separate inline <style> blocks, one per page. 8 different font stacks across them. Zero shared stylesheets. Every guide carried its own complete copy of its own design.

Then I counted class names. 391 unique classes across the set. 252 of them appeared in exactly one guide. Only 12 had real reuse across more than a couple of files: hero, wrap, topbar, eyebrow, table-wrap, num, brand-mark, sub, callout, dot, brand, toast.

So the honest description of the old site is not “the CSS drifted”. There was never a design system to drift from. Each guide was a self-contained document that happened to look roughly like the others because I copied the previous one and edited it.

That explains a thing I had been blaming on motivation. Writing a new guide meant writing a new stylesheet. Not consciously, but in practice: paste the last one, adjust the colours, add whatever this guide needed, ship. The prose was maybe 30% of the work.

The fix is not “be more disciplined about CSS”. It is that those 12 reused classes are the actual component set, and everything else was invented under deadline pressure to solve a problem the system had no answer for. Build the 12 properly, express the rest in terms of them, and the marginal cost of a new page goes to roughly zero.

I would not have found the 12 by thinking about it. I found them by grepping and sorting by count.

Back to all 12 notes