ساختار فایل های Css و JS برای صفحات سایت

@samsihsajadi
من از یک صفحه js وscss برای تمام پروژم چه تک صفحه چه با صفحات داخلی استفاده میکنم. بنظر من برخی کدهای js رو که تداخل دارند را تو خود صفحه htmlبزنید. واگه کار با scss رو بلد باشید براحتی میتونید با یه کلاس به div اصلی اون صفحه aرو ازb متمایز کنید و هیچ مشکلی تو تداخل کلاس ها وجود ندارد. چه بسا بسیاری از کلاسها شبیه هم هستند. یکی از ویژگی های scss همینه که به کد مادر کلاس متمایز بدید هیچ تداخلی اتفاق نمیفته

سلام خسته نباشید
وقتی شما می گید تو همچین سایتی که بیست صفحه متفاوت داره وقتی شما بیست صفحه متفاوت دارید بهترین راهش فکر کنم همین باشه که برای اون بیست صفحه مجزاتون css و ،js جذا بنویسید که هر صفحه فایل های مخصوص خودش رو داره به غیر هدر با فوتر و بعضی چیزهای دیگه تو همه صفحه های سایت یکسان هست که اونو می تونید جداگانه از یه فایل دیگه فراخوانی کنید.
این نظر من تازه کار بود

سلام... مرورگر ها قابلیت کش کردن دارن و با یک‌بار لود فایل تو تمامی صفحات دیگه نیازی به لود مجدد که به کاهش پرفورمنس منجر بشه نداریم.. و نکته بعد اینه که بسیاری از css ها و J's ها معمولا توی کل صفحات تکرار میشن فقط تصور کنید که نیاز به تغییر فرایند یا ظاهر یه قسمت دارین اگه جدا ذخیره کنید چه مکافاتیه.... پس با خیال راحت توی یک فایل css هاتونو ذخیره کنید.. و برای js ساختار کامپوننتی رو اجرا کنید که برای دیباگ کمکتون می‌کنه ولی در نهایت یه فایل رو توی رفرنس های پیج بذارین...

سلام
مرورگر ها دفعه اول که فایل رو دریافت میکنن این فایل ها رو کش میکنن و دفعات بعد از روی کش میگیرن فایل ها رو.
نوشتن css و جاوااسکرپ توی فایل های جدا هم هیج مشکلی نداره.
ولی شاید شما دوست نداشته باشید که کدهاتون رو جدا کنید و میخوایید همه رو توی یه فایل قرار بدید
در این صورت میتونید از کتابخانه requiredjs استفاده کنید.
این کتابخانه اجازه ماژول بندی کدهارو بهتون میده و هر کجا که یک ماژول رو درخواست بدید فقط همون ماژول رو لود میکنه

ممنون از همه دوستان جواب ها عالی بودند. @lgo @zandi2015 @davoodkhany @nimadoustdar99

فقط یک سوال از آقای زندی دارم. الان فهمیدم که باید همه فایل های Css و JS رو توی یک فایل لود کنم.
البته یک مشکل دیگه هست.
فرض کنید توی فایل A یک کلاس box داریم و این کلاس رو توی فایل B نداریم.
حالا فرض کنیم تمام JS ها توی یک فایل الحاق شدند و لود شدند و قسمتی از کد داخل این فایل که مربوط به فایل a.js هست به صورت زیر هست:

let box = document.querySelector('.box');  
box.addEventListener('click', () => {  
console.log('Clicked!');  
});  

فرض کنید الان در فایل B هستیم. موقع لود و ران کردن این اسکریپت، به دلیل نبود کلاس box در این فایل (B) اون ایونت که بهش بایند شده ارور میده (ارور null بودن متغیر box) و از اسکریپت خارج میشه و بقیه اسکریپت دیگه خونده نمیشه.
در واقع سوالم این هست که برای اینجور کدها که باهم تداخل دارم چیکار کنم؟
آیا باید این کدها رو توی یک فایل جدا لود کنم - مثل همین کاری که تا الان دارم میکنم، فایل هایی که باهم تداخل ندارند توی فایل main.js و اونهایی که باهم تداخل دارند رو توی a.js جداگانه در فایل A لود میشند - یا مثلا این کدهایی که با هم تداخل دارند رو توی خود HTML بنویسم یا ... ؟
ممنون که راهنمایی میکنید.