Page-Specific CSS Prefixing Guide
Why manual prefixing still matters (and how to do it right)
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 as of April 21, 2025.
Disclaimer:
This guide reflects my personal methodology based on building, maintaining, and troubleshooting many real-world websites — both public and private. 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.
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 ■■■■
- Risk of being removed from future web tasks
This isn’t optional. It’s the house standard.
Reference Date & Source
This guide is based on:
AyotteConsulting.com CSS Prefixing Reference
https://ayotteconsulting.com/css-prefixing-reference.html
Last updated: April 21, 2025
Questions or Examples
Post your questions or share prefixing examples in the forum topic below this guide. Let’s make sure every page stays clean, scoped, and conflict-free.