ובדף הhtml מחק את תגית הlink שמקשרת לCSS לחלוטין, ושים את הסקריפט הזה בhead של הhtml

<script>
function addCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
 
    document.head.appendChild(link);
}
 
addCss(location.pathname + '.css');
</script>

דף סגנון 1: style1.sss/
דף סגנון 1: style2.sss/

/folder/page.html

כמו"כ מה כתובת קובץ הסגנון היחיד שבינתיים ישנו

כרגע יש לי קובץ אחד עם HTML, סטייל, וסקריפט.

מה אני צריך לעשות?

1. להוסיף קובץ סגנון:

function addCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;

    document.head.appendChild(link);
}

addCss(location.pathname.replace('/', '_') + '.css');

2. להוסיף class בbody ואז בקובץ הסגנון לתלות הכל לפי הקלאס הזה:

      document.body.classList.add(location.pathname.replace('/', '_'));
   

אולי תשתמש עם דינמיות צד שרת וזה יחסוך לך את כל הבעיה.

תזכה למצוות

1. לשים אותם בתיקיות שונות ואז שהCSS עם אותו שם באותה תיקיה עם הפניה יחסית,
2. לטעון את הסטייל עם סקריפט בהתאם לשם הדף/נתיב נוכחי (זה יעבוד פחות טוב).

    <link rel="stylesheet" href="/css/mystyle.css">