Css 在angular 9应用程序中，应该更喜欢什么；全局样式或组件级样式

我们有两个选项可以在Angular 9应用程序中保留样式；styles.css中的全局样式或组件css文件中的单个组件级样式。 如果从绩效角度看项目； 首选的方式是什么？

---

我们应该将所有样式保存在一个global style.css文件中，还是将每个组件相关的样式保存在其component.css文件中？

有几种方法可以将全局（应用程序范围的样式）样式添加到应用程序中。样式可以内联添加、在index.html中导入或通过angular-cli.json添加。角度样式允许我们在单个组件中添加特定于组件的样式，这将覆盖全局样式。

我认为性能上没有太大（如果有）显著差异。全局或组件样式的区别在于这些样式的范围和代码库的可维护性。一般来说，最好将所有内容都保存在组件中，因为它们的作用域是自己的，并且不会意外地从其他任何地方覆盖其他相同的样式。而全局风格应该主要停留在主题、实用程序、助手等方面

---

此外，如果出于某种原因需要，您还可以选择将组件样式设置为全局样式。

定义全局样式的步骤/首选方法

在css文件夹中创建_base.scss文件（首先创建css文件夹）

在_base.scss文件中导入其他帮助scss文件

在style.scss文件中添加_basescss文件的条目（创建文件夹时style.scss可用）

---

要回答这个问题，我们必须参考

通过使用组件样式，您将拥有更好的模块化设计

Angular可以将组件样式与组件捆绑在一起，从而实现更多功能 模块化设计优于常规样式表

但是，如果有一些样式在多个组件之间是通用的，那么最好有一个共享的css，例如，如果您使用诸如

.SCSS

，

LESS

，

SASS

，…，这样的预处理器，您可以使用一些

\u var.SCSS

来定义常规样式，例如基本颜色，字体， ... 然后在其他组件样式中导入

@import

，或者只在样式部分注册全局样式文件，默认情况下，该部分预先配置了全局

样式.css

文件

因此，使用组件样式为您的应用程序提供范围限制和视图封装。此范围限制是样式模块化功能：

• 您可以使用最有意义的CSS类名和选择器 在每个组件的上下文中
• 类名和选择器是组件的本地名称，不会与应用程序中其他地方使用的类和选择器冲突
• 对文档中其他地方样式的更改 应用程序不会影响组件的样式
• 您可以将 每个组件的CSS代码，以及 组件，从而形成整洁的项目结构
• 你可以 更改或删除组件CSS代码，而无需搜索 整个应用程序以查找代码的其他使用位置