Question

我是网络开发人员，而不是CSS专家。我们最近开始使用Angular，我想知道在Angular模板中应用样式的最佳实践是什么。我们正在讨论的是使用外部CSS文件还是内部样式标记。我们没有太多模板，每个模板大多都有自己独特的样式。我们正在讨论外部CSS文件和/或内部样式。有人在这个问题上提供专家意见。

Answer 1

内部样式仅适用于包含它们的页面。因此，如果您想要在多个页面上更新常见样式（例如菜单），则需要单独更新每个页面。

考虑到你几乎肯定某些样式适用于超过一页的更常见的元素，你肯定想要选择外部样式表。这允许页面A和B都从单个style.css或类似文件继承样式。

这样，您可以在每页的<head>中使用一行代码加载所有相关样式：

<link href="style.css" rel="stylesheet">

当您想要更新多个页面的样式时，您只需要更新style.css。

Answer 2

Angular带来了v1.5的scoped CSS（当引入组件时 - 我相信）。这是一个很好的概念，但在中小型应用中，差异很难说明。您应该只考虑将scoped CSS与知道如何充分利用它的工具（即Webpack）结合使用。

如果您不使用Webpack，只需坚持经典型号：一个大样式表。

请注意，从技术上讲，无论堆栈如何，如果您想提供最佳体验（没有FOUC的最快加载时间），您希望将所有上层和一般布局样式内联，最好是在头部<style>标记以及异步加载的样式表中的所有其他内容。

阅读有关加载CSS异步的this article。