所以我最近开始在我的网站上更多地使用EJS模板，所以我做了一些事情，比如把顶部导航栏和其他东西分解到他们自己的模板中。有没有一个标准的做法来组织CSS(或者更具体地说，SCSS)？我应该只为每个模板制作一个匹配的SCSS，并只为该模板制作样式，然后在使用该模板的每个页面中添加<link/>吗？或者我只是将<style/>标记添加到模板本身，并在其中添加CSS。这有标准模式吗？
好问题。我认为答案是"不"，没有公认的最佳标准。
我的"工作导师"总是给我的建议是好的：他说"做最容易维护的事情"。这将取决于你的项目。我可以想出几个通用策略：
每个模板一个样式表
在某种程度上，这是最简单的建议。可能是最容易开发的，每个页面都会带来所需的最少样式。
然而，这使得重用样式变得非常不可能。如果不在每个需要的工作表中重新包含.myclass的样式，您将无法将<button class="myclass">插入任何模板。此外，如果您想像通常的做法那样自动化样式表(缩小或连接它们以用于生产等)，那么从现在开始这是不可能的。
还有一个缺点，你可能会得到一些意想不到的排序效果。就像如果你的"widget.css"最终在你的"article.css"之后被添加到DOM中一样，它可能会以不同于之前出现在DOM中的方式覆盖样式。
每页上的所有样式
再说一遍，这很简单。每个页面都包含所有的样式表(或者可能只有一个巨大的样式表)。您可以在外部布局模板中链接到它一次。自动缩小等操作将很容易，而且添加样式表的顺序永远不会有任何意外。
明显的缺点是每页都有很多未使用的样式。但是css在大小方面相当"便宜"，所以这可能不是一个坏的缺点。
介于之间
在每个页面上包含一些样式，并使某些样式特定于页面或模板。实际上，这可能是大多数应用程序最终要做的事情。
您可以普遍地包括要重用的实用程序样式(例如button.bigred、form.orderform等)，以及诸如bootstrap之类的依赖项。我还建议在超过一半的页面上包含您需要的任何样式(导航栏的前样式)。
用于一个特定页面的其他样式可以通过链接直接添加到该页面。
最后一个音符
我试图避免html中的<style>标签，原因有两个：
- 许多js库动态地向DOM添加或删除
<style>标记，因此为它们留出空间可以避免可能的错误或重叠 - 它们是从模板中向页面添加动态样式或用户管理样式的好方法。在样式表中保留不变的样式，以避免可能出现的错误或与自己重叠：)