所以我最近开始在我的网站中更多地使用 EJS 模板，所以我做了一些事情，比如将顶部导航栏和其他事情分解成他们自己的模板。是否有关于如何组织 CSS（或更具体地说是 SCSS）的标准做法？我是否应该只为每个模板制作一个匹配的 SCSS，只包含该模板的样式，并在使用该模板的每个页面中添加 <link/>？或者我只是将<style/> 标签添加到模板本身，其中包含 CSS。这有标准模式吗？
【问题讨论】：
好问题。我认为答案是“不”，没有普遍最佳或公认的标准。
我的“工作导师”总是给我的建议是很好的建议：他说“做最容易维护的事情”。这将取决于您的项目。我可以想到几个通用策略：
每个模板一个样式表
在某种程度上，这是最简单的建议。可能是最容易开发的，每个页面都会带来最少需要的样式。
但是，这使得重用样式几乎不可能。如果不将.myclass 的样式重新包含在您需要的每个工作表中，您将无法将<button class="myclass"> 插入任何模板。此外，如果您想要自动化您的样式表（缩小或连接它们以进行生产） , 等）作为惯例，从这里开始不太可能。
还有一个缺点，您可能会得到一些意想不到的排序效果。就像如果您的“widget.css”最终在您的“article.css”之后被添加到 DOM 中，它可能会以不同于之前出现在 DOM 中的方式覆盖样式。
每个页面上的所有样式
再一次，这很好而且很简单。每个页面都包含所有样式表（或者可能只是一个巨大的表）。您可以在外部布局模板中链接到它一次。自动缩小等将很容易，并且不会有任何与添加样式表有关的意外。
明显的缺点是每个页面都有很多未使用的样式。但是 css 在大小方面相当“便宜”，所以这可能不是那么糟糕的缺点。
介于两者之间
在每个页面上包含一些样式，并制作一些特定于页面或特定于模板的样式。实际上，这可能是大多数应用程序最终会做的事情。
您可以普遍包含旨在重复使用的实用程序样式（例如 button.bigred、form.orderform 等），以及诸如引导程序之类的依赖项。我还建议在一半以上的页面上包含您需要的任何样式（例如导航栏的样式）。
用于特定页面的其他样式可以通过链接直接添加到该页面。
最后的注释
出于几个原因，我尽量避免在 html 中使用 <style> 标签：
<style> 标记，因此为它们留出空间可以避免可能的错误或重叠。【讨论】：
<style>标签的最后一个注意事项实际上是一件好事我注意到Vue.js中的一种模式，其中HTML、JS和CSS都在同一个.vue中模板文件。但这是有道理的，为什么它不是 .ejs 模板中最好的。谢谢。