Javascript 我应该动态地将样式标记注入头部还是在身体中包含样式标记？

我有一些html内容，通过服务器端调用嵌入到页面中。因此，当在服务器上编译页面的html时，会调用另一台服务器以返回一些html，然后将其嵌入到主体中某个div中。问题是，此内容包含自己的css。因此，我编写了一个脚本，将样式标记注入ready上的HEAD中，这在桌面浏览器上运行良好。然而，在移动设备上，有相当多的未定型内容。我知道从技术上讲，你不应该在身体中包含样式标签，但在这种情况下，只在身体中包含样式标签而不是将样式标签注射到头部会产生更好的结果吗

在这种情况下，似乎正确的解决方案是修复您的体系结构，以便服务器端编译器可以在页面头中包含远程页面的CSS。这可能涉及将远程页面的CSS从标记中分离出来，然后在编译期间将其作为单独的文件包含在页面头中

---

鉴于各种原因，正确的解决方案并不总是可行的，因此往往需要妥协。如果CSS能够产生您想要的结果，那么将其留在远程标记中可能是最好的解决方案。或者，可能需要一些其他的黑客将CSS引入头部服务器端。你需要决定做这些事情是否值得，如果在你的限制下你可以完成这些事情。

这里进行一些讨论。根据我的经验，很多企业内容都能做到这一点。这是否意味着这是正确的做法？我不知道。但在我的经验中，这当然不是不赞成的

资料来源：

为什么要分开？ 代码效率：文件越大，下载时间越长，一些人查看这些文件的成本也就越高（有些人仍然按兆字节付费下载）。因此，您不想在每个HTML文件中都塞满样式和布局信息的大页面上浪费带宽。一个更好的替代方法是将HTML文件精简整齐，并在一个单独的CSS文件中只包含一次样式和布局信息。要查看这方面的实际案例，请查看A List Apart Slashdot rewrite文章，作者在这篇文章中选取了一个非常流行的网站，并用XHTML/CSS重新编写了它

易维护性：从最后一点开始，如果您的样式和布局信息仅在一个位置指定，则意味着您只需在一个位置进行更新即可更改站点外观。您希望在站点的每个页面上更新此信息吗？我不这么认为

可访问性：视觉受损的网络用户可以使用一种称为“屏幕阅读器”的软件，通过声音而不是视觉来访问信息——它可以直接向他们读出页面，如果网页具有适当的语义结构，如标题和段落，它可以更好地帮助人们在网页中找到自己的方式。此外，网页上的键盘控件（对于那些不能使用鼠标的移动障碍者来说很重要）如果使用最佳实践构建，效果会更好。最后一个例子是，屏幕阅读器无法访问锁定在图像中的文本，并且会发现JavaScript的某些用法令人困惑。确保您的关键内容可供所有人使用

设备兼容性：由于您的HTML/XHTML页面只是简单的标记，没有样式信息，因此只需应用一个替代样式表，就可以为具有截然不同属性（如屏幕大小）的不同设备重新设置格式-您可以通过几种不同的方式（查看[dev.opera.com上的移动文章]获取相关资源）。CSS还允许您为不同的演示方法/媒体类型指定不同的样式表（例如在屏幕上查看、打印、在移动设备上查看） 网络爬虫/搜索引擎：你很可能希望通过谷歌或其他搜索引擎轻松找到你的页面。搜索引擎使用“爬虫”，这是一款专门的软件，用于浏览您的页面。如果爬虫程序在查找页面内容时遇到问题，或者由于您没有将标题定义为标题等原因而错误地解释了重要内容，那么您在相关搜索结果中的排名可能会受到影响

这只是一个很好的实践：这有点“因为我这么说了”的原因，但如果你和任何一个关注标准的专业web开发人员或设计师交谈，他们会告诉你，分离内容、风格和行为是开发web应用程序的最佳方式

其他stackoverflow文章：

---

为什么不在css文件中编译所有可能的样式？或者预加载样式文件，注入头部，然后在完成后呈现html内容。