Javascript 具有多个css文件的单页应用程序，如何在文件中划分css？

我正在创建一个角度剑道应用程序。
我计划创建一个单页应用程序。
我想将所有业务登录分为多个页面。
每个页面都有不同的JavaScript、CSS和HTML文件。
我根据用户交互动态加载这些html文件

根据单页架构，我们需要在主页中包含所有JavaScript和CSS文件，在主页中动态加载所有页面

所以我的问题是，如何为每个屏幕划分CSS样式。
每个屏幕是否需要不同的类/id名称

我可以做下面这样的事情吗

// 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; }

//Page1.html
页
//页面1.css
#myPage1.某物{颜色：黑色；}
//页面2.html
页
//第2.css页
#myPage2.某物{颜色：蓝色；}

因此，

Page1.css

和

Page2.css

将在主布局中一次加载。
当我加载

Page2.html

时，就会应用样式

Page2.css

---

哪种方法正确？

您不应将每个页面的css划分为不同的文件，将其全部保存在一个文件中以减少延迟，并添加对css文件或index.html页面中的文件的引用，或添加对主页的任何内容的引用

---

对于JavaScript，每个Angular控制器都有自己的文件，最后您应该可以使用Gulp、Grunt或Visual Studio捆绑所有这些文件，如果您使用的是Web Essentials或MVC捆绑

，因为它们是不同的选择器，实际上它们是否在同一个文件中并不重要。一般来说，您会在部署之前将css和minifiy组合起来，因此只需加载一次较小的css文件。在开发过程中，并没有什么可以阻止您单独加载它们：）除非您使用angular 1.5，否则并没有好的方法。（所以您可以在css中使用组件名称作为id）我更喜欢使用类（class=“page1”），但您可以使用id来确定页面。或者，您可以使所有元素类都不同，如“page1 input”。其实并不重要。首先，构建应该像js一样压缩和缩小css。第二，没有人创建依赖IDE的构建。@PetrAveryanov是的，你说得对，这正是我所说的，Gulp和grunt用于在文件更改时结合css和JavaScript。两者都与IDE无关，MVC捆绑与IDE无关，只有web essentials与IDE无关，而且它不仅用于此，还有很多其他有用的功能。我不会对此投反对票，因为这对一些人来说是一个很好的答案，但对一个相当大的单页应用程序来说却不是。我们的应用程序有750个屏幕，我们正在寻求切换到单页REACT。CSS将会很有趣，因为没有人想要100MB的CSS包含。不幸的是，html5作用域样式被弃用。