I have a project in Angular Kendo where I am working on developing a single page application. The plan is to separate the business logic into different pages, each with its own set of JavaScript, CSS, and HTML files that are dynamically loaded based on user interaction.
As part of the single page architecture, all JavaScript and CSS files need to be included in the main page for dynamically loading other pages.
My question is, how should I divide the CSS styles for each screen? Do I need to use different class/id names for each screen?
Is it possible to structure it like this:
// Page1.html
<div id="myPage1">
<div class="something">Page</div>
</div>
// Page1.css
#myPage1 .something { color: black; }
// Page2.html
<div id="myPage2">
<div class="something">Page</div>
</div>
// Page2.css
#myPage2 .something { color: blue; }
Both `Page1.css` and `Page2.css` would be loaded at one time in the main layout. When `Page2.html` is loaded, the styles from `Page2.css` will be applied.
Which approach is the correct way to handle this situation?