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

Question

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

Answer 1

好问题。我认为答案是“否”，没有通用的最佳或公认的标准。

我的“工作导师”总是给我的建议是很好的建议：他说“做什么最容易维护”。这取决于你的项目。我能想到的一对夫妇的一般策略：

每个模板

一个样式表，是一种方式，最简单的建议。可能最容易开发，每个页面将带来最低需要的样式。

但是，这使得重复使用样式变得不可能。如果您不需要在每张表中包含.myclass的样式，则无法将<button class="myclass">插入任何模板中。另外，如果您希望自动化样式表（将它们缩小或连接为生产等）这是常见的做法，从这里不可能实现。

再一个缺点是，您可能会遇到一些意想不到的订购效果。就像如果你的“widget.css”在你的“article.css”之后被添加到DOM，它可能会以不同于以前在DOM中出现的方式来重写样式。

每一页

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

明显的缺点是大量未使用的样式带到每个页面。但从尺寸来看，css相当“便宜”，所以这可能不是一个坏的方面。

某处

之间 包括每一个页面上的一些风格，并提出一些无论是页面特定的或特定的模板。实际上，这可能是大多数应用程序最终要做的。

您可以普遍包含意图重用的实用程序样式（例如button.bigred,form.orderform等）以及依赖项（如bootstrap或其他）。我还建议在您的一半以上的页面中包含您需要的任何样式（例如导航栏的样式）。

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

最后一个音符

我会尽量避免在HTML <style>标签有两个原因：

• 很多JS库的动态添加或删除<style>标签的DOM，所以留下为他们清楚的空间避免了可能的错误或重叠。
• 它们是从模板中为页面添加动态或用户管理样式的好方法。保持样式表中不变的样式，以避免可能的错误或与自己重叠:)