以编程方式生成的HTML中的样式表和正文和头部标记

Question

我正在使用Scala生成HTTP，HTML和CSS。我还打算使用Scala生成Javascript，但我还没到达那个阶段。

使用单独的样式表有什么好处？ CSS提供了一种多重继承形式，您可以通过它来组织标记的样式。然而，Scala已经有了自己的多重继承系统，其他功能语言提供了自己强大的问题分解和声明组合方法。在生成单独的样式表时，会增加算法的复杂性并妨碍生成易于理解的干净代码。

单独样式表所声称的优点之一是它们使用较少的带宽。然而，我发现很难相信CSS使用大量带宽而不是图像，更不用说视频了。那么单独的样式表是否有利于搜索引擎排名和站点分类？它们会加快或减慢渲染和布局吗？它们是否有助于辅助功能和用户定义的风格？我原本以为不使用单独的样式表实际上可能会加速HTTP 1.1中的交付，如果不是在2.0

与头部和身体节点/标签类似。它们是否有利于证明以编程方式生成它们的复杂性？它们似乎与浏览器产生的功能没有任何区别。

所以问题是单独的样式表和Body和Head节点对于生成最佳网站有多重要？将CSS放入HTML叶节点是否可以？

Answer 1

使用单独样式表的优点：

• Cachability：无需一遍又一遍地重新加载相同的样式
• 尺寸较小：即使使用gzip压缩，所有样式相似的400 newFilterValues个标签在每页电线上的字节数将多于没有内联样式的页面。
• 可能性：某些CSS 无法以内联样式表示。例如，任何伪元素或状态选择器（div，:hover等）
• DRY：如果您在编译时构建样式树以在编译时应用于HTML树，则不适用。

缺点：

• 速度：内联样式渲染速度更快，因为当浏览器解析标记时，它知道适用的样式。
• 位置：内联样式可以让您轻松查看元素的外观（浏览器调试工具使其成为一个有争议的问题）

:focus / html / head - 我需要它们吗？

general consensus seems to be "yes"，主要是因为如果你不包含它们，你更有可能遇到模糊的浏览器错误（因为“如何选择让孩子成为哪个孩子”元素“算法并不明显，一些角落案例对开发人员来说不一定明显。”