使用JS生成CSS样式表

Question

使用JS生成CSS样式表

Viv*_*sas 1 javascript css css-frameworks

我最近试图构建一个非常简约,轻量级的CSS框架(类似Pure CSS).

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

列类看起来像col-x-12,并且JS能够计算宽度并使用更少的代码编写列类.
我将能够映射CSS的JS属性(bg为background,例如),从而也减少了文件大小.

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

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

Answer 1

Ale*_*x P 5

出于几个原因,这听起来像个坏主意.

这可能会导致向用户发送较小的文件大小.如果文件大小是您主要关注的问题 - 也许您正在通过昂贵的卫星上行链路进行传输 - 那么您可能需要通过JavaScript生成CSS.但如果没有,你将毫无理由地克服几个缺点:

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

那么你该怎么做呢？

确保您的资源被gzip压缩.JavaScript和CSS只是文本.结果,它们压缩得很好.
结合并缩小您的资产.如果您的项目中有10个CSS文件,则浏览器必须为它们发出10个单独的请求.将这些文件合并到一个文件中意味着浏览器只需要发出一个请求.缩小消除了人类需要但计算机不需要的东西 - 注释,空格,换行符和描述性变量名称.Google为您的CSS和JavaScript提供了一些工具建议.
删除不必要的代码.像UnCSS这样的工具可以帮助您找到未使用的CSS规则; 这是JavaScript中的一个难题,但您可以使用代码覆盖工具来帮助您.
确保正确缓存资产.您的JS和CSS文件不会定期更改,因此您网站的访问者只需要检索一次.他们的浏览器将缓存文件,并在下一页视图中重复使用它们.
使用像SASS这样的工具来生成CSS.它对您的文件大小没有帮助,但它可以帮助您编写更少的代码.例如,Neat和Foundation都有可以通过SASS自定义的网格系统.您可以编写更少的代码并轻松更改网格设置,并让SASS为您生成生成的CSS.
别担心.有可能,您当前的设置足够好 - 或者有一些易于改进的领域.如果没有,几乎肯定会更好地利用你的时间.也许它是技术性的,比如添加新功能或修复bug.也许这与业务有关,比如与潜在客户交谈或调整一些营销副本.对于您的项目而言,有一些东西比构建此工具有更大的回报.

归档时间：	11 年，4 月前
查看次数：	132 次
最近记录：	11 年，4 月前