【发布时间】：2020-10-07 04:33:09
【问题描述】：
我们有两个选项可以在 Angular 9 应用程序中保留样式； styles.css 中的全局样式或组件 css 文件中的单个组件级样式。 如果从性能的角度来看项目； 什么应该是首选方式？ 我们应该将所有样式保存在一个全局 style.css 文件中，还是将每个组件相关的样式保存在其 component.css 文件中？
【问题讨论】：
【发布时间】：2020-10-07 04:33:09
【问题描述】：
要回答这个问题，我们必须参考Angular official doc.
通过使用组件样式，您将拥有更好的模块化设计。
Angular 可以将组件样式与组件捆绑在一起，从而实现 more 模块化设计比常规样式表。
但是，如果在多个组件之间有一些共同的样式，最好有一个共享的 css，例如如果你使用.SCSS、LESS、SASS、...等预处理器，你可以有一些_var.scss来定义通用样式，比如base color、 fonts, ... 然后 @import 在其他组件样式中，或者只是在样式部分中注册全局样式文件，默认情况下，预先配置了全局 styles.css 文件。
因此，使用组件样式可为您的应用提供范围限制和视图封装。此范围限制是样式模块化功能：
- 您可以使用最有意义的 CSS 类名和选择器 在每个组件的上下文中。
- 类名和选择器是组件本地的，不会与应用程序中其他地方使用的类和选择器发生冲突。
- 在其他地方的样式更改 应用程序不会影响组件的样式。
- 您可以将 每个组件的 CSS 代码与 Typescript 和 HTML 代码 组件，这导致了一个整洁的项目结构。
- 您可以 无需搜索即可更改或删除组件 CSS 代码 整个应用程序来查找代码的其他用途。
【讨论】：
有几种方法可以将全局（应用程序范围的样式）样式添加到 Angular 应用程序。样式可以内联添加，在 index.html 中导入或通过 angular-cli.json 添加。 angular 允许我们在单个组件中添加组件特定的样式，这将覆盖全局样式。
【讨论】：
我认为性能上没有太大（如果有的话）显着差异。全局或组件样式的区别在于这些样式的范围和代码库的可维护性。通常，将所有内容保留在组件中是个好主意，因为它们的范围仅限于自己，并且不会意外地覆盖其他任何地方的其他相同样式。全局样式应该主要用于主题、实用程序、助手等。
此外，如果出于某种原因您需要这样做，您还可以选择使组件样式全局化。
【讨论】：