javascript - 单页应用有多个css文件，如何在文件中划分css？

Question

我正在创建一个 Angular Kendo 应用程序。
我打算创建一个单页应用程序。
我想把所有的业务登录分成多个页面。
每个页面都有不同的 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.css 和 Page2.css 将在主布局中同时加载。
当我加载 Page2.html 时，样式 Page2.css 将被应用。

哪个是正确的方法？

Answer 1

您不应该将每个页面的 css 分成不同的文件，将它们全部放在一个文件中以减少延迟并在 index.html 页面或任何主页中添加对 css 文件或文件的引用。

对于 JavaScript，每个 Angular Controller 都有自己的文件，最后你应该有一些东西可以使用 Gulp、Grunt 来捆绑所有这些文件，或者如果你使用的是 Visual Studio，你可以使用 Web Essentials 或 MVC Bundling