包含多个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