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

【问题标题】：Single page application with multiple css files, how to divide css in files?具有多个css文件的单页应用程序，如何在文件中划分css？
【发布时间】：2016-03-22 07:42:32
【问题描述】：

我正在创建一个 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。

哪种方法是正确的？

【问题讨论】：

因为它们是不同的选择器，所以它们是否在同一个文件中并不重要。通常，您会在部署之前组合您的 css 并缩小它，因此只需加载一次较小的 css 文件。在开发过程中，没有什么能阻止你单独加载它们 :)
除非您使用 Angular 1.5，否则没有好办法。（因此您可以在 css 中使用组件名称作为 id）我更喜欢使用类（class="page1"），但您可以使用 ids 来确定页面。或者你可以让所有元素类都不同，比如'page1-input'。没关系。

标签： javascript html css angularjs single-page-application

【解决方案1】：

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

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

【讨论】：

首先，构建应该像 js 一样连接和缩小 css。其次，没有人创建依赖于 IDE 的构建。
@PetrAveryanov 是的，你说得对，这正是我所说的，Gulp 和 grunt 用于在文件更改时结合 css 和 JavaScript。并且两者都与IDE无关，MVC Bundling与IDE无关，只有Web Essentials，它不仅用于此，它还有很多其他有用的功能
我不会对此投反对票，因为它对某些人来说是一个很好的答案，但对于一个相当大的单页应用程序来说却不是。我们的应用程序有 750 个屏幕，我们希望切换到单页 REACT。 CSS 会很有趣，因为没有人想要包含 100MB 的 CSS。不幸的是 html5 范围样式已被弃用。