Question

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

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

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

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

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

我只是想知道别人如何处理这个问题，或者可能有更好的过程？

Answer 1

缩小的CSS真的应该只是你的网站的生产版本。当您执行测试/更改等时，这应该在您的站点的某些测试或开发版本中在辅助服务器区域中完成，您可以在其中获得css的行号版本。 JavaScript也是如此。在生产可查看副本上，您希望它缩小。在开发中，你没有。

无论如何，你应该总是有2份你的CSS。第一个副本是作为开发副本的主要源副本。它具有所有格式正确的样式，并带有换行符。另一个是你的css的最新缩小版本，用于生产。这将允许您在需要解决问题的情况下快速切换2个文件，假设您的站点使用某种模板化传递（布局页面，母版页或其他）。

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

Answer 2

我同意乔尔 - 我就是这样处理的。在每个版本FTP生成之前，构建脚本会缩小CSS（和JS ）。我只是在PHP中有一个开关，如：

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

Answer 3

Personnaly，我使用ant构建脚本制作生产版本：

这样你就可以将这些文件的http请求分开，并获得30％到70％的带宽。也取决于gzip。

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

Answer 4

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

我最近开始使用source maps，在浏览器中再次检查CSS时，查看正确的文件和行号（我的文件较少）。我认为这就是你要找的东西。我个人并不需要这么多额外的幻想。