更少的 CSS 性能和实现答案

【问题标题】：Less CSS performance and implementation更少的 CSS 性能和实现
【发布时间】：2015-07-09 00:49:16
【问题描述】：

在 CSS 中使用 LESS 的最佳方式是什么。

基本上，开发人员应该编写一个 Less 文件，然后将其编译用于生产
我应该链接 LESS 代码和 javascript 文件吗？
或者我应该完全跳过 LESS 溃败并重新制作课程

我正在尝试整理一些相当草率的 css，并希望在进行重大改进之前控制它。我认为拥有站点范围的变量会非常好，因此对于变量和嵌套而言，Less 似乎是一件好事。

我用 css 渐变和框阴影替换了很多背景图像，所以我也在尝试摆脱供应商前缀。有时我会看到什么样的类看起来像类重载，但是将很多类附加到诸如

之类的元素是不好的

<div class="comment dark-shadow round-corners"></div>

【问题讨论】：

我不会“很多”地调用 3 个类。
嗯，这就是我想要了解多少类太多的感觉。
还有这些类的具体程度。例如 .box-shadow .3pxbox-shadow .3px-box-shadow-blue

标签： css less css-frameworks

【解决方案1】：

Less 是一种很棒的样式语言。我广泛使用它，它确实有助于代码的可维护性以及编写样式的速度。

我个人觉得你的样式不应该依赖javascript来渲染，所以我用less.app把我所有的LESS编译成CSS。我知道我所有的 CSS 都在那里并且在我将任何东西“上线”之前它可以正常工作，我会更加平静地休息。

如果你有兴趣，我也一直在编译一个非常有用的 LESS mixin 库：https://github.com/jdmiller82/-lessins-

【讨论】：

我现在建议使用 Codekit 而不是 Less.app。它出自同一个开发者之手，但 Codekit 添加了更多内容，包括 SASS 和咖啡脚本处理等等。
顺便说一下less.app是免费的，你可以在这里得到它：incident57.com/less

【解决方案2】：

我同意乔纳森的观点，我认为您不应该依赖用户浏览器来呈现样式。

我想出了一个解决方案，它在服务器上使用node.js 来拦截styles.css 之类的请求，并尝试找到等效的.less 文件（在本例中为styles.less）并对其进行解析并将其作为CSS 返回.

因此，在您的服务器上，您将只有 styles.less，但您可以请求 URL example.com/styles.css 并获取已解析的 LESS 文件。这样，您的应用程序的其余部分就可以无缝集成，并且不需要用户启用 JavaScript。

您也不必为应用的其余部分使用node.js。我是在一个 PHP 应用程序中完成的。

你可以在这里阅读我的教程：http://programming-perils.com/155/parse-less-files-on-the-fly-and-serve-them-as-css/

【讨论】：

【解决方案3】：

我意识到这个答案比上述答案晚了大约两年，但我认为这个问题仍然相关。

我认为有些用例编译一些 LESS 客户端是一个好主意（前提是您不支持 IE 8 或更低版本）并且您有一个验证它的用例。例如，我最近开发的一个应用程序有一个可定制的、可主题化的界面，其中需要根据背景颜色是浅色还是深色来修改文本颜色等，并且最终可能需要支持该功能让用户更改它们并实时查看站点上反映的这些更改。我认为这是客户端 LESS 的一个很好的用例。请注意，只编译了一个小的 LESS 样式表，而与主题无关的应用程序 LESS 的其余部分被预编译。我还没有看到明显的性能差异。

因此，当您看到诸如“您不会认真地认为任何体面的开发人员使用较少的客户端吗？”这样的 cmets 时，我会持保留态度。

【讨论】：

【解决方案4】：

将LESS用于生产网站的方法是将LESS文件编译成CSS文件。

对于本地开发，您可以拥有一个文件观察器，用于为已更改的 LESS 文件重建 CSS 文件。

如果你有多个 CSS 文件要从 LESS 生成，你应该把它们分开。

例如，如果您的文件少了 30 个，并且它们生成了两个 CSS 文件 a.css 和 b.css，那么您需要将这两个作业分开，以便更快地编译。开发速度更快，因为只有在更改任何影响它的 LESS 文件时才会编译 a.css。

【讨论】：