Page-Specific CSS Prefixing Instructions

This document defines how page-specific CSS classes must be handled across the entire site, public and hidden pages included. Follow these instructions precisely. No shortcuts, no assumptions, no creative interpretation.

1. Objective

Each page must have its own dedicated set of CSS class names, clearly prefixed based on the page name, to ensure:

No class name collisions between pages
Easier maintenance and organization
Faster identification and debugging
100% site-wide consistency, including hidden pages

2. Global Styles (No Prefix)

Only the following components are allowed to use unprefixed global styles:

Classes related to navigation and footer must remain globally named (example: nav-container, footer-block).

All other styles must be page-prefixed. No exceptions.

Navigation and Footer Implementation

The navigation and footer are implemented as modular components:

nav.html contains the navigation markup (<nav> element with links).
footer.html contains the footer markup (a <div> with class footer-block and its sections).

Each page includes the following placeholder elements:

<div id="navbar"></div>
<div id="footer"></div>

A shared components.js file at the root dynamically loads the components using the fetch() API and inserts them via innerHTML.

Important notes:

✅ Changes to navigation or footer are made only once and apply site-wide.
✅ Page-specific styles and structures remain fully separated.

3. Page-Specific CSS Prefix Rules

Prefix rules are as follows:

index.html = prefix "index-"
about.html = prefix "about-"
ebooks.html = prefix "ebooks-"
ventures.html = prefix "ventures-"
And so on for all pages

Hidden and internal pages must also use the correct prefix. No exceptions.

4. Process to Follow

Work on one page at a time.
Update all page-specific classes to use the correct prefix in both HTML and CSS.
Verify visually before committing.

Important notes:

Never migrate two pages at once.
Never leave a page half-converted.
Test fully before committing.

5. Examples

Wrong Example (bad):

Class used in HTML: "hero-section"

Class used in CSS: ".hero-section"

This is wrong because it is not prefixed.

Correct Example for index.html (good):

Class used in HTML: "index-hero-section"

Class used in CSS: ".index-hero-section"

This is correct because it is scoped specifically to index.html.

6. Consequences of Not Following Instructions

Failure to properly prefix will cause:

Style collisions between pages
Broken visuals
Hours of wasted cleanup
Possible reassignment or removal from future tasks

Important: Follow the instructions carefully. Move methodically. Verify each page before moving forward.