使用 JS 生成 CSS 样式表答案

【问题标题】：Generating CSS stylesheet using JS使用 JS 生成 CSS 样式表
【发布时间】：2014-08-15 21:34:47
【问题描述】：

我最近尝试构建一个极简、轻量级的 css 框架（类似于 Pure CSS）。

在检查我的代码时，我的一位朋友建议我使用 Javascript 生成 CSS，主要是为了显着减小文件大小。在以下两种情况下文件大小会减小：

列类类似于col-x-12，JS 将能够计算宽度并使用更少的代码编写列类。
我将能够在 JS 中映射 CSS 属性（例如，bg 对应于 background），从而也减小了文件大小。

生成的 CSS 可以直接插入到head 或添加到CSSStyleSheet。

这种方式除了运行 JS 会带来一点点开销之外，还有什么问题呢？

【问题讨论】：

你会把 JavaScript 放在哪里？嵌入内联还是使用外部文件？
大小的差异在很大程度上是无关紧要的，特别是如果您在从服务器传输文件时对文件进行 gzip 压缩。我只是编写普通的 CSS 并使用它。如果您不想全部手写，请查看 [LESS](lesscss.org) 或 SASS
@SalmanA，使用外部文件。
@Bojangles，我向他指出了这一点，但正如他正确反驳的那样，即使是 JS 也会被压缩。文件大小的整体减小会有所帮助，不是吗？
与任何较小的有效负载一样，是的，但是用 JavaScript 编写 CSS 所需的努力远远超过任何（小）尺寸节省。在 CSS 中编写 CSS 更快、更语义化并且远更易于维护。招聘新团队成员时也没有问题（如果适用）

标签： javascript css css-frameworks

【解决方案1】：

这听起来是个坏主意，有几个原因。

这可能会导致发送给用户的文件变小。如果文件大小是您最关心的问题 - 也许您正在通过昂贵的卫星上行链路进行传输 - 那么您可能需要通过 JavaScript 生成 CSS。但如果没有，您将无缘无故地与几个缺点作斗争：

没有 JavaScript 的用户将获得一个完全没有样式的页面。这可能没问题，尤其是当文本是页面中最重要的元素时。但最好遵循progressive enhancement 的原则，让任何使用支持 CSS 的浏览器的人都能获得样式化页面。
你的造型会更加脆弱。如果您发布错误或无效的 JavaScript，您的网站将完全没有样式。如果您的 JavaScript 包含特定于浏览器的错误，那么对于这些用户来说，它将完全没有样式。如果您的 JavaScript 被浏览器插件或公司防火墙阻止，您的网站将完全没有样式。
开发人员必须学习您的自定义 CSS 语言。您的开发人员必须学习您自己的专有方言，而不是到处使用标准 CSS。如果不给他们时间来学习你的系统，你就不能聘请外部专家。
开发人员必须考虑额外的抽象。当您的开发人员编写了一些无法按预期工作的 CSS 时，他们不再考虑“如何应用此 CSS？”。他们必须思考“从我的速记中生成了什么 CSS？以及如何应用这些 CSS？”。这使您的样式更难理解和调试，并使问题需要更长的时间来解决。
调试 CSS 问题变得更加棘手。如果您的代码在一个普通的 CSS 文件中，那么浏览器的调试工具可以显示您尝试调试的任何 CSS 规则的文件名和行号。如果您从 JavaScript 生成 CSS，则情况并非如此。你也许可以使用CSS source maps 来克服这个问题——但现在你的 JS 工具也必须支持生成源映射。
您有额外的维护负担。您不仅必须维护您的 CSS，还必须维护您的工具。
您可能不会增加感知的加载时间。即使您向浏览器发送的字节数更少，您的页面也可能会变慢（或感觉变慢）。当您的 JavaScript 运行时，您有两种选择：
- 当document.ready 触发时。这样做的缺点是，在您的 JavaScript 完成运行并且浏览器使用您新添加的样式规则完成重新绘制页面之前，您的页面将以无样式的方式显示。
- 只要您的<script> 标记在您文档的<head> 中求值。这样可以避免显示无样式的内容，但是现在浏览器必须做很多工作：
  1. 解析您的自定义样式规则并从中生成 CSS。
  2. 为您的样式生成一个 DOM 元素，并将其插入到页面中。
  3. 解析那些新的 CSS 规则。
  所有这些步骤都必须在浏览器继续加载页面之前运行。这意味着用户必须等待更长时间才能看到页面。
您不会免费获得缓存。您的页面必须在每次页面加载时完成所有工作 - 或者您必须以缓存生成的 CSS 并在存在时重用它的方式编写 JavaScript。如果您的样式位于普通 CSS 文件中，则浏览器将为您处理缓存。
不划算。电脑时间便宜；程序员的时间很昂贵。上述所有问题在开发、维护、培训、文档和测试方面所消耗的时间将超过它们在页面加载时间方面所节省的时间。

那么你应该怎么做呢？

确保您的资产是sent gzipped。 JavaScript 和 CSS 只是文本。结果，它们压缩得很好。
合并和缩小您的资产。如果您的项目中有 10 个 CSS 文件，浏览器必须为它们发出 10 个单独的请求。将这些文件组合成一个文件意味着浏览器只需发出一个请求。缩小去除了人类需要但计算机不需要的东西——cmets、空格、换行符和描述性变量名。 Google has some tool recommendations for your CSS and JavaScript。
删除不必要的代码。有UnCSS 之类的工具可以帮助您找到未使用的 CSS 规则；这是 JavaScript 中的一个更难的问题，但您可以使用 a code coverage tool 来帮助您。
确保您的assets are cached correctly。您的 JS 和 CSS 文件不会定期更改，因此您网站的访问者只需检索一次。他们的浏览器将缓存文件，并在他们的下一页视图中重复使用它们。
使用SASS 之类的工具来生成您的CSS。它不会帮助您调整文件大小，但可以帮助您编写更少的代码。例如，Neat 和 Foundation 都有可以通过 SASS 自定义的网格系统。您可以编写更少的代码并轻松更改网格设置，并让 SASS 为您生成生成的 CSS。
别担心。很有可能，您当前的设置已经足够好 - 或者有一些易于改进的地方。如果没有，几乎可以肯定可以更好地利用您的时间。也许它是技术性的，例如添加新功能或修复错误。也许它与业务相关，例如与潜在客户交谈或调整一些营销副本。与构建此工具相比，您的项目可以获得更大的回报。

【讨论】：

这是一个非常详细/正确的答案。我刚刚在JS 中修改了一个网格系统，但由于某种原因感觉很糟糕。绘图问题是一个真正的问题，其他一切都可以绕过。无论哪种方式，预处理器都可以解决它。