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 — without exception — must be page-prefixed.

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 small JavaScript snippet at the bottom of each page dynamically loads the components using the fetch() API.

The loaded HTML is inserted into the placeholder elements 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.