使用较少或缩小的 CSS 的最佳实践

Question

我正在考虑在即将到来的项目中减少使用，但一直在尝试找出在开发过程中使用它的最佳方法。

通常，在开发网站时，我会编写 html 和 css，然后开始在浏览器中测试它，查看它的外观、优化、重新加载并重复整个过程，直到我对所有内容的外观感到满意为止。

该过程的一个关键部分是使用浏览器中的“检查元素”功能来识别我需要更改的 CSS 片段。通常只需查看行号，我就知道 CSS 文件中的位置。

但如果我使用 Less（或任何其他组合/压缩 CSS 的方法），就会使行号变得毫无用处。我知道我可以使用“查找”来搜索代码部分，但行号要快得多。

当处理涉及其他开发人员或大型 CSS 文件的项目时尤其如此。

我只是想知道其他人如何处理这个问题，或者也许有更好的过程？

Answer 1

缩小的 CSS 确实应该只用于站点的生产版本。当您执行测试/更改等时，这一切都应该在辅助服务器区域中的站点的某些测试或开发版本中完成，您可以在其中使用可用的 css 行号版本。 JavaScript 也是如此。在生产可视副本中，您希望将其缩小。在开发过程中，你不需要。

无论如何，您应该始终拥有 2 个 css 副本。第一个副本是主要源副本，即您的开发副本。它具有所有格式正确且带有换行符的样式。另一个是已投入生产的最新 CSS 缩小版本。如果您需要解决某些问题，这将允许您在两个文件之间快速切换，假设您的站点使用某种模板化交付（布局页面、母版页或其他）。

缩小版本仅在最终交付中有用。所有其他需求都应使用主副本。在站点的服务器端部分放置一个配置来确定要使用的样式表可能不是一个坏主意。这样您就可以简单地更改配置设置并进入“调试”模式。

Answer 2

我同意乔尔的观点——这就是我的处理方式。在将每个版本通过 FTP 传输到生产环境之前，构建脚本会缩小 CSS（和 JS）。我只是在 PHP 中有一个开关，例如：

if ($config->prod()) {
    // incldue the minfied css
} else {
    // include all the original files
}

Answer 3

就我个人而言，我使用 ant 构建脚本来制作生产版本：

1. 它将多个 css 文件“压缩”为一个
2. ，然后使用 YUI 压缩器缩小它们，
3. 脚本相同
4. （页面重新组合以指向新生成的文件），

这样您就可以划分 http我想说，请求这些文件，并获得 30% 到 70% 的带宽。也取决于 gzip。

就我而言，开发版本有：
18 CSS 权重 178ko
在生产版本中，在 96ko 时减少到 1 个 CSS

Answer 4

每次保存 Less 文件时，我个人都会使用工具来缩小 CSS 并将其注入浏览器。所以我立即看到每一个变化。这样一来，刚刚发生的事情就很清楚了。我不再需要太多的引用行号。

我最近开始使用源映射来查看正确的文件并再次在浏览器中检查 CSS 时（我的 less 文件的行号）。我想这就是你正在寻找的。我个人并不需要这种额外的花哨。