使用JS生成CSS样式表

时间：2014-08-15 07:01:52

标签： javascript css css-frameworks

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

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

  1. 列类看起来像col-x-12，JS可以计算宽度并使用更少的代码编写列类。

  2. 我可以在JS中映射CSS属性（例如bg background），从而减少文件大小。

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

    除了运行JS所带来的小开销之外，这种方法可能会导致什么其他问题？

1 个答案:

答案 0 :(得分：5)

出于几个原因，这听起来不错。

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

  1. 没有JavaScript的用户将获得完全没有样式的页面。这可能没问题，特别是如果文本是页面中最重要的元素。但最好遵循progressive enhancement的原则，让任何使用支持CSS的浏览器的人都可以获得一个样式页面。
  2. 你的造型会更脆弱。如果您发送错误或无效的JavaScript，您的网站将完全没有样式。如果您的JavaScript包含特定于浏览器的错误，那么对于这些​​用户来说，它将完全没有问题。如果您的JavaScript被浏览器插件或公司防火墙阻止，您的网站将完全没有样式。
  3. 开发人员必须学习自定义CSS语言。您的开发人员不必在任何地方使用标准CSS，而是必须学习您自己的专有方言。您无法聘请外部专家，也无需花时间学习您的系统。
  4. 开发人员必须考虑额外的抽象。当你的开发人员编写一些不按预期工作的CSS时，他们不再思考＆＃34;这个CSS是如何应用的？＆＃34;。他们必须思考＆＃34;从我的简写中生成什么CSS？如何应用CSS？＆＃34;。这使得您的样式更难理解和调试，并且使问题需要更长时间才能解决。
  5. 调试CSS问题变得更加棘手。如果您的代码在普通的CSS文件中，那么浏览器的调试工具可以显示您尝试调试的任何CSS规则的文件名和行号。如果您从JavaScript生成CSS，则情况并非如此。您可以使用CSS source maps来克服这个问题 - 但现在您的JS工具也必须支持生成源映射。
  6. 您有额外的维护负担。您不仅必须维护CSS，还必须维护您的工具。

  7. 您可能无法增加感知加载时间。即使您向浏览器发送较少的字节，您的页面也可能会变慢（或感觉更慢）。 JavaScript运行时有两种选择：

    • 当document.ready开火时。这样做的缺点是，在JavaScript完成运行之前，您的页面将以不正常的方式显示，并且浏览器将使用新添加的样式规则重新绘制页面。

    • 只要您的<script>代码在您的文档<head>中进行评估。这样可以避免显示无样式的内容，但现在浏览器需要做很多工作：

      1. 解析自定义样式规则并从中生成CSS。
      2. 为您的样式生成DOM元素，并将其插入到页面中。
      3. 解析那些新的CSS规则。

        4. 所有这些步骤必须在浏览器继续加载页面之前运行。这意味着用户必须等待一段时间才能看到页面。

  8. 您无法免费获得缓存。您的页面必须在每个页面加载时执行所有操作 - 或者您必须以缓存生成的CSS并重新使用它（如果存在）的方式编写JavaScript。如果您的样式位于普通的CSS文件中，那么浏览器将为您处理缓存。
  9. 这不符合成本效益。电脑时间便宜;程序员时间很贵。上述所有问题在开发，维护，培训，文档和测试方面将花费更多时间，而不是在页面加载时节省。

    10. 那你该怎么做呢？

    • 确保您的资源为sent gzipped 。 JavaScript和CSS只是文本。结果，它们压缩得很好。
    • 合并并缩小资产。如果您的项目中有10个CSS文件，则浏览器必须为它们发出10个单独的请求。将这些文件合并到一个文件中意味着浏览器只需要发出一个请求。缩小会消除人类需要的东西，但计算机不会 - 评论，空格，换行符和描述性变量名称。 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。
    • 不要担心。有可能，您当前的设置足够好 - 或者有一些易于改进的领域。如果没有，几乎可以肯定更好地利用你的时间。也许它是技术性的，比如添加新功能或修复bug。也许它与业务有关，比如与潜在客户交谈或调整一些营销副本。对于您的项目来说，有一些东西比构建这个工具有更大的回报。
相关问题
最新问题