EJS 模板中是否有 CSS 的标准模式？

Question

所以我最近开始在我的网站中更多地使用 EJS 模板，所以我做了一些事情，比如将顶部导航栏和其他东西分解成他们自己的模板。 是否有关于如何组织 CSS（或更具体地说是 SCSS）的标准做法？ 我是否应该只为每个模板创建一个匹配的 SCSS，只使用该模板的样式，并在每个使用该模板的页面中添加<link/> ？ 或者我只是将<style/>标签添加到模板本身，并在其中添加 CSS。 这有标准模式吗？

Answer 1

好问题。 我认为答案是否定的，没有普遍最佳或公认的标准。

我的“工作导师”总是给我的建议是很好的建议：他说“做最容易维护的事情”。 这将取决于您的项目。 我可以想到几个一般策略：

每个模板一个样式表

这在某种程度上是最简单的建议。 可能是最容易开发的，每个页面都会带来最少需要的样式。

然而，这使得重用样式变得非常不可能。 您将无法将<button class="myclass">插入任何模板，而无需在您需要它们的每个工作表中.myclass的样式。此外，如果您想自动化您的样式表（缩小或将它们连接起来进行生产等），这是常见的做法，从这里开始不太可能。

还有一个缺点，你可能会得到一些意想不到的排序效果。 就像如果您的“widget.css”最终在您的“article.css”之后被添加到 DOM 中，它可能会以不同于它在 DOM 中更早出现的方式覆盖样式。

每个页面上的所有样式

同样，这很好也很简单。 每个页面都包含所有样式表（或者可能只是一个巨大的表）。 您可以在外部布局模板中链接到它一次。 自动化缩小等将很容易，并且永远不会有与添加样式表的订单相关的任何意外。

明显的缺点是每个页面都有很多未使用的样式。 但是 css 在大小方面非常“便宜”，所以这可能不是一个糟糕的缺点。

介于两者之间

在每个页面上包含一些样式，并制作一些特定于页面或特定于模板的样式。 实际上，这可能是大多数应用程序最终要做的事情。

您可以普遍地包含旨在重用的实用程序样式（例如button.bigred 、 form.orderform等），以及 bootstrap 等依赖项。 我还建议在超过一半的页面上包含您需要的任何样式（例如导航栏的样式）。

用于特定页面的其他样式可以通过链接直接添加到该页面。

最后一个音符

出于以下几个原因，我尝试避免在 html 中使用<style>标签：

• 许多 js 库动态地向 DOM 添加或删除<style>标签，因此为它们留出空间可以避免可能的错误或重叠。
• 它们是从模板中向页面添加动态或用户管理的样式的好方法。 保留样式表中不变的样式，以避免可能的错误或与自己重叠:)