Removing 11,500 Lines of Duplicated CSS

power-explained had grown to 46 HTML files, each carrying its full CSS inline. That was fine when there were seven files. At 46, a bug in a shared component meant 46 fixes — or, more likely, 46 inconsistencies.

The immediate trigger was dark mode. The site's design uses opacity variants extensively — text at 70% opacity, borders at 20%, backgrounds at 50%. In light mode these read as warm grays and soft tones. The original implementation used hardcoded rgba(26,23,20,0.7) values, which worked fine until dark mode flipped the background. Then you had dark text on a dark background in about 200 places across the codebase. The fix that didn't scale: changing every instance. The fix that did: CSS channel variables.

Channel variables separate the color from the opacity. Instead of rgba(26,23,20,0.7), you write rgba(var(--ink-rgb), 0.7). The --ink-rgb variable holds just the RGB components — 26,23,20 in light mode, 240,232,216 in dark. One variable swap per theme, every opacity variant follows automatically. It's a pattern I hadn't used before and won't forget.

Once the colors were fixed, extracting the shared styles to a single style.css was mostly mechanical — grep for recurring class definitions, consolidate, test. The final number was around 11,500 lines removed. The site looks identical. The codebase is now maintainable.

The lesson isn't profound: duplication is a debt that compounds. The interesting part was the channel variable pattern, which is a genuinely better approach to opacity-based theming than anything I'd used before.