Dev Log: Engineering Evolution: The Centralized HUD

Engineering Evolution: The Centralized HUD

I recently had a breakthrough in how I manage my project’s architecture. For a long time, I was working under the assumption that CSS belonged inside the posts themselves. It wasn't about "div soup"—the actual markup was already clean—but the code within my posts was bloated and inefficient[cite: 1].

The Realization

I was stuck in a loop of manual maintenance. If I wanted to update a single style, I had to replicate that work across 30+ individual posts. It was a repetitive, high-friction workflow that hindered my ability to iterate[cite: 1].

Through this process, I came to a clearer understanding of how CSS is meant to function. I realized that my post-by-post approach was violating the DRY (Don't Repeat Yourself) principle. I was essentially creating 30+ instances of the same code, which bloated the posts and made global changes impossible[cite: 1].

The Refactor

I shifted my CSS from individual posts into the centralized hub built right into the Blogger theme. By doing this, I moved from a "per-post" mindset to a "site-wide" architecture. Now, my CSS propagates everywhere automatically; I edit the style in one place, and it updates the entire project[cite: 1].

Tooling Up: VS Code

To support this, I moved my workflow out of the highly constrained Blogger HTML editor and into VS Code. Between the keyboard shortcuts and the superior editing environment, the speed at which I can now maintain my markup is significantly faster than the old mouse-click method[cite: 1].

Putting it into Practice: The HUD Update

With this new centralized architecture in place, I was able to test my understanding of color hierarchy immediately. I’ve refined the site’s aesthetic to align with a PlayStation-inspired palette[cite: 1]:

• Structural Blue (#0070CC): Now handles all core HUD components, borders, and shadows[cite: 1].
• Antique Gold (#C5A059): Re-purposed to act as a high-contrast accent for headings and key trophy data[cite: 1].

This isn't just a color change; it’s a demonstration of how a cleaner, more efficient codebase allows for better design. I’m no longer fighting my own code to make updates—I’ve built a system that lets me evolve the project as fast as I can think[cite: 1].