Why manual prefixing still matters (and how to do it right)
This guide reflects a personal methodology based on building, maintaining, and troubleshooting real-world websites. It's not theoretical or based on automated tools. These rules have been field-tested for clarity, consistency, and long-term maintainability. Your mileage may vary, but this structure has saved me countless hours.
If you've ever debugged conflicting styles across different pages, you know how fast things go sideways. This guide is for developers who work manually, not with automated CSS-in-JS tools or bundlers. It explains a real-world approach to CSS prefixing, the one used on AyotteConsulting.com.
Why Prefix CSS Per Page?
Because it prevents:
- Class name collisions across pages
- Accidental overwrites during layout changes
- Headaches when debugging or scaling the site
And it ensures:
- Visual consistency
- Clean, readable CSS
- Simpler maintenance
The Only Global Classes Allowed
Only these may be unprefixed:
- Navigation-related classes (e.g.
.nav-container,.nav-link) - Footer-related classes (e.g.
.footer-block,.footer-note)
All other styles must be prefixed.
The nav and footer are modular components. They're inserted into pages via <div id="navbar"></div> and <div id="footer"></div> using a small JavaScript fetch() routine.
Prefixing Rules
Every page gets its own prefix. Follow this format:
| Page File | Required Prefix |
|---|---|
index.html | index- |
about.html | about- |
ebooks.html | ebooks- |
ventures.html | ventures- |
| Any internal page | Use matching prefix |
Correct vs Incorrect Usage
Incorrect
<div class="hero-section"></div>.hero-section {
padding: 2rem;
}Correct (for index.html)
<div class="index-hero-section"></div>.index-hero-section {
padding: 2rem;
}Work Process
- Work one page at a time.
- Prefix every class except nav/footer.
- Visually test changes.
- Never leave a page half-converted.
- Commit only when everything checks out.
What Happens If You Ignore This?
- CSS bleed between pages
- Broken layout and inconsistent visuals
- Debugging hell
- Risk of being removed from future web tasks
This isn't optional. It's the house standard.
Final Thoughts
CSS prefixing isn't glamorous, but it keeps your stylesheets sane as a project grows. If you're building multi-page sites by hand, this approach will save you real time and real headaches down the road.