Vivek Ghaisas
最近，我试图构建一个极其简约的轻量级CSS框架（类似于Pure CSS）。
在检查代码时，我的一位朋友建议我使用Javascript生成CSS，主要是为了大大减小文件大小。在以下两种情况下，文件大小将减小：
列类看起来像col-x-12，而JS将能够计算宽度并使用更少的代码来编写列类。
我将能够在JS CSS属性映射（bg对background等），从而也减少了文件大小。
生成的CSS可以直接插入head或添加到中CSSStyleSheet。
除了由于运行JS引起的少量开销外，这种方法还会导致什么其他问题？
亚历克斯·P
听起来有一个坏主意，原因有几个。
这可能会导致发送给用户的文件较小。如果文件大小是您的主要考虑因素-也许您正在通过昂贵的卫星上行链路进行传输-那么您可能需要通过JavaScript生成CSS。但是，如果没有，您将无缘无故地与几个缺点作斗争：
- 没有JavaScript的用户将获得一个完全无样式的页面。可能没关系，特别是如果文本是页面中最重要的元素。但是最好遵循渐进增强的原则，并让使用支持CSS的浏览器的任何人都能获得样式化的页面。
- 您的样式将更加脆弱。如果运送错误或无效的JavaScript，您的网站将完全没有样式。如果您的JavaScript包含特定于浏览器的错误，那么这些用户将完全无法设置其样式。如果您的JavaScript被浏览器加载项或公司防火墙阻止，则您的网站将完全不样式化。
- 开发人员必须学习您的自定义CSS语言。开发人员不必学习通用的CSS，而必须学习自己的专有方言。您不能不聘请外部专家学习系统而聘请外部专家。
- 开发人员必须考虑一个额外的抽象。当您的开发人员编写了某些无法正常工作的CSS时，他们不再思考“如何应用此CSS？”。他们必须思考“我的速记生成了什么CSS？如何应用CSS？”。这使您的样式更难以理解和调试，并且使解决问题的时间更长。
- 调试CSS问题变得更加棘手。如果您的代码位于普通的CSS文件中，则浏览器的调试工具可以向您显示您要调试的任何CSS规则的文件名和行号。如果要从JavaScript生成CSS，则不是这种情况。您也许可以使用CSS源地图来克服这一问题-但现在您的JS工具也必须支持生成源地图。
- 您有额外的维护负担。您不仅必须维护CSS，而且还必须维护工具。
您可能不会增加感知的加载时间。即使您向浏览器发送的字节数减少了，页面也可能变慢（或感觉变慢）。您的JavaScript运行时有两种选择：
- 您不会免费获得缓存。您的页面必须完成每次页面加载时的所有工作-或者您必须以缓存生成的CSS并重新使用它的方式编写JavaScript。如果您的样式位于普通的CSS文件中，则浏览器将为您处理缓存。
- 它不符合成本效益。电脑时间便宜；程序员的时间很昂贵。以上所有问题在开发，维护，培训，文档和测试方面将比在页面加载时间上节省的时间更多。
那么，您应该怎么做呢？
- 确保将您的资产发送到gzip后。JavaScript和CSS只是文本。结果，它们压缩良好。
- 合并并最小化您的资产。如果您的项目中有10个CSS文件，则浏览器必须对其进行10个单独的请求。将这些文件合并为一个文件意味着浏览器仅需发出一个请求。缩小消除了人类需要但计算机不需要的东西-注释，空格，换行符和描述性的变量名。Google为您的CSS和JavaScript提供了一些工具建议。
- 删除不必要的代码。像UnCSS这样的工具可以帮助您找到未使用的CSS规则；这在JavaScript中是一个更难解决的问题，但是您可以使用代码覆盖率工具来为您提供帮助。
- 确保正确缓存了您的资产。您的JS和CSS文件不会定期更改，因此您网站的访问者只需检索一次即可。他们的浏览器将缓存文件，并在其下一个页面视图上重复使用它们。
- 使用SASS之类的工具来生成CSS。它不会帮助您调整文件大小，但可以帮助您减少代码编写。例如，Neat和Foundation都有网格系统，您可以通过SASS对其进行自定义。您可以编写更少的代码，轻松更改网格设置，并让SASS为您生成结果CSS。
- 不用担心。可能是，您当前的设置足够好-或有一些需要轻松改进的地方。如果没有，几乎可以肯定，您可以更好地利用自己的时间。也许是技术性的，例如添加新功能或修复错误。也许与业务有关，例如与潜在客户交谈或调整一些营销文案。与构建此工具相比，对您的项目而言，有一些收益要大得多。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
我来说两句