使用多个外部样式表或尽可能少?利弊

时间:2013-01-18 19:59:43

标签: html css seo

我正在搜索CSS最佳做法,考虑维护我的代码的最佳做法是什么,我阅读的内容几乎与我所学到的几乎完全相反,但它来自谷歌。 我总是喜欢使用多个样式表。我觉得维护代码更好,而且我的代码也不会加载几个不会被使用的css类。

Google开发人员指导我们完全相同:

  

将外部样式表合并到尽可能少的文件中可以减少RTT并减少下载其他资源的时间。

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

  1. 将CSS分为两个文件:一个CSS文件,包含启动时呈现页面所需的最少代码;和一个CSS文件,其中包含在页面加载完成之前不需要的代码。
  2. 在自己的文件中提供很少访问过的组件的CSS。仅在用户请求该组件时提供文件。
  3. 对于不应缓存的CSS,请考虑将其内联。
  4. 不要使用CSS文件中的CSS @import。
  5. 真的......当css不会被缓存时,Google建议使用内联css?或尽量使用较少的css文件? (确保我们不应该为每件事使用css,但我们总是阅读有经验的网页设计师建议使用多个样式表,所以我真的很困惑(如果它不是来自谷歌,我&# 39; d忽略但是实际上,我想过询问stackoverflow的用户意见,因为我觉得它对其他人也有帮助。)

    PS:You can find here the address of the information I posted

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

适用于移动用户,因此您的网页将减少服务器请求数量。走得更快CSS精灵是相同的想法,也有图像压缩器可用。响应式设计提供大量信息。

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/