2013-01-18 34 views
3

我在做一个关于CSS最佳实践的搜索,想想维护我的代码的最佳实践是什么,我读了几乎所有我学到的东西,但它来自谷歌。 我总是喜欢使用多个样式表。我发现维护代码更好,而且我的代码也不会加载几个不会被使用的css类。使用多个外部样式表或尽可能少?优点和缺点

谷歌开发者指导我们完全oposite:

外部样式表合并成少数文件尽可能减少了往返时间和延迟下载其他资源。

这里是在生产你的CSS文件,结合一些经验法则,还建议他们:

  1. 分区的CSS到2个文件每个:包含需要渲染的最小码一个CSS文件在启动页面;和一个CSS文件,其中包含在页面加载完成之前不需要的代码。
  2. 在其自己的文件中为很少访问的组件提供CSS。仅当用户请求该组件时才提供文件。
  3. 对于不应该被缓存的CSS,考虑内联它。
  4. 不要在CSS文件中使用CSS @import。

真的...... Google推荐内嵌css时,css不会被缓存?或尽可能少使用css文件? (当然,我们不应该为每件事情都使用css,但是我们总是阅读经验丰富的网页设计师推荐使用多个样式表,所以我非常困惑(如果它不是来自谷歌,我会忽略,但是作为是的,我想过问计算器的用户的意见,因为我认为它可以帮助他人太)

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

+0

什么他们说做了很大的意义。尝试尽可能少地加载尽可能少的CSS文件。第一个应该是你需要运行网站的基础,第二个应该是在加载时不需要的东西。所有这些只是为了减少加载时间,并使整个网站的效率更高。我感觉合理。 –

+0

但是,当你加载数以千计的不在页面中使用的css类时(例如,当你构建一个巨大的系统时),这不是一个坏习惯吗? – periback2

+0

他们没有说任何关于加载你不需要的东西。事实上,他们说的是相反的。加载网站在开始时运行所需的最低限度,然后再加载其他所有内容。 –

回答

2

页面请求通常需要更长的时间,然后加载一些额外的字节为单位为什么Google会建议他们做什么,这确实是最佳做法,我也是这么做的。

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

1

那么当你编写代码时,你可以把它全部保存在不同的样式表中,然后你可以把它全部转储到最后。

这是给移动用户使用,所以你的页面会减少服务器请求&走得更快。 CSS精灵是相同的想法,也有图像压缩器。并提供有关响应式设计的大量信息。

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

你可能会寻找一样都不能少或萨斯工具,使其更容易: 阅读:http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/

下载:http://crunchapp.net/