javascript - 在进行 Javascript 密集型工作时，将所有样式保留在 CSS 文件中有什么好处？

Question

似乎有一种信念，即所有样式都需要保存在 CSS 文件中。如果我在做纯粹的 JavaScript 工作，这对我来说没有意义。如果我创建一个名为“StatisticSummaryPanel”的 JavaScript 对象，那么将 CSS 样式保留在 JavaScript 对象中肯定会更好。这样我只需要维护一个文件而不是两个文件。

Answer 1

将 CSS、JavaScript 和 HTML 放在单独的文件中通常被认为是更好的做法，因为这样可以更轻松地为您自己以及未来可能出现并处理您的文件的开发人员定位、理解和调试。

在您的 JavaScript 文件中，它只是一种更简洁的方法，可以简单地引用将其属性存储在 CSS 文件中的类或 ID。

如果您在多个 JavScript 对象中重用一个类，并且您需要更改该类的属性，那么您只需更新 CSS 文件。

Answer 2

如果您需要在不同的页面/javascript 文件中重用相同的样式，它会有所帮助。这样，如果您的样式发生更改，则无需更改使用它的所有文件。

此外，它可以被缓存并使您的页面更快。

并且来维护更多文件，这是基于文件大小的调用。如果它太大，单个文件的维护成本很高。

Answer 3

有几个问题：

1. 代码易读性

与直接用自己的语法编写相比，用 Javascript 编写 CSS 或 HTML 很冗长，而且难以阅读和编辑。

2. 混淆行为和逻辑

实现基本功能需要最少的样式，但不应混淆外观和逻辑。弄清楚如何以及在何处将有关外观的代码集成到有关行为的代码中是一项无意义的任务。如果您的行为脚本中没有深奥的风格要求，您的代码将更加清晰。

3. 检索

人们不希望在 Javascript 中找到 CSS。当有人想尝试改变 的外观时StatisticSummaryPanel，他们会在 CSS 中寻找它。他们期望找到其风格定义的最后一个地方是 JS。

Answer 4

关注点分离：在这种情况下，表示（各种效果如何出现和呈现）和行为（所述效果的原因）的分离。根据我们的经验，将两者分开可以让我们为前者雇佣优秀的平面设计师，为后者雇佣优秀的程序员。

对于一个小项目，这可能无关紧要，因为您是唯一负责代码的人。但是，如果您计划扩展到一个团队，则值得考虑不同成员的专业化程度，以及如何最好地协调队友之间的变化。