3

我正在搜索 CSS 最佳实践，思考维护我的代码的最佳实践是什么，我读到了一些与我所学的几乎所有内容完全相反的东西，但它来自谷歌。我总是喜欢使用多个样式表。我发现维护代码更好，而且我的代码不会加载几个不会使用的 css 类。

谷歌开发者将我们引导至相反的方向：

将外部样式表组合到尽可能少的文件中可以减少 RTT 和下载其他资源的延迟。

以下是在生产中组合 CSS 文件的一些经验法则，也是他们推荐的：

  1. 将 CSS 分成 2 个文件：一个 CSS 文件包含启动时呈现页面所需的最少代码；和一个 CSS 文件，其中包含在页面加载完成之前不需要的代码。
  2. 在自己的文件中提供很少访问的组件的 CSS。仅当用户请求该组件时才提供文件。
  3. 对于不应缓存的 CSS，请考虑将其内联。
  4. 不要使用 CSS 文件中的 CSS @import。

真的......当css不会被缓存时，谷歌推荐内联css？或尽可能使用较少的 css 文件？（当然我们不应该对每件事都使用 css，但我们总是读到有经验的网页设计师建议使用多个样式表，所以我真的很困惑（如果它不是来自谷歌，我会忽略，但作为是的，我考虑过询问stackoverflow的用户意见，因为我认为它对其他人也有帮助）。

PS：你可以在这里找到我发布的信息的地址。

4

2 回答 2

2

页面请求通常需要更长的时间然后加载一些额外的字节。这就是为什么谷歌建议他们做什么。这确实是 imo 的最佳实践，也是我所做的。

只是为了让您的代码井井有条，您应该考虑使用像 less (lesscss.org) 这样的 css 预处理器。这样，您可以将代码保存在单独的文件中，以便于开发。然后，您在 master less 中使用一堆 @import 语句，并将其编译为 css。那是您需要在页面中加载的唯一 css 文件。请确保@import .less 文件，而不是 .css 文件，因为后者仍会生成额外的页面请求。

于 2013-01-18T20:07:21.320 回答
1

好吧，当您编写代码时，您可以将它们全部保存在单独的样式表中，然后您可以在最后将它们全部转储到一个样式表中。

它适用于移动用户，因此您的页面将减少服务器请求并加快速度。CSS sprites 是相同的想法，也有可用的图像压缩器。以及有关响应式设计的大量信息。

http://www.speedawarenessmonth.com/15-things-for-making-your-site-faster-for-mobile-users/

您可能正在寻找像 Less 或 Sass 这样的工具来简化它：阅读：http ://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets /

下载：http ://crunchapp.net/

于 2013-01-18T20:12:39.133 回答