最佳实践-只下载您需要的CSS，还是使用缩小过程？

在提高网站整体性能（下载和渲染速度）的背景下，以下两种最佳实践之间似乎存在矛盾：

只调低所需的CSS，以便查看页面。（因为CSS规则太多会导致渲染速度慢）

始终缩小CSS并将其合并到一个文件中。（因为请求越多，页面加载越慢）

现在假设我决定遵循规则1

出现了以下问题：

如果两个页面共享一组CSS规则怎么办？

在这种情况下，我需要将这些规则放在一个单独的文件中，并从两个页面引用该文件

然而，如果我开始有很多这样的“共享规则”，我可能会从每个页面引用很多单独的文件，从而违反规则2

例如，页面A可能依赖于CSS 1和2，而页面B和C都依赖于CSS 2，页面D依赖于CSS 1

在这种情况下，不可能每页都有一个CSS，甚至每页都有多个CSS，因为有些页面需要与其他页面共享一些CSS文件

但是我们不能通过将每个页面的所有CSS组合到一个单独的每页CSS文件中来解决这个问题吗？

我们可以，但这会造成其他问题

如果两个页面共享一个CSS片段，即使我们将其压缩，我们仍然会重复下载该片段，每次我们请求一个包含该片段的CSS页面时

因为我们已经按页面压缩了CSS，所以当一个CSS片段被两个或多个页面共享时，我们允许出现冗余

浏览器缓存在这里对我们没有好处，因为对于浏览器来说，每个CSS文件都有不同的文件名，因此是一个单独的文件，即使其中一些文件包含相同的内容

那么我们应该打破哪条规则？

我要划掉的是：

一,。您应该只调低所需的CSS，以便查看页面

我认为缩小/组合我的网站的所有CSS，并一次完成，更简单、更实用

至于这可能造成的性能问题，我认为以下事实可以减轻这些问题：

• 现代浏览器处理CSS规则的速度越来越快，所以很快，如果你的内存中有很多没有被使用的规则，这就无关紧要了

• 缓存所有CSS将大大提高速度，而不是在用户浏览到需要这些规则的页面时忽略不必要的规则，这些规则无论如何都会被加载

---

我在这里吗？

1。您应该使用Gzip

对于asp.net

编辑：

2。并高效地编写CSS选择器

3。和组合

4。阅读此问题答案中的建议

---

我不喜欢每个页面都有多个CSS文件。4-5个css文件就足够了

1. Common.css (with reset and common layout and typography and Form styling)
2. pagespecific.css (css of home and other landing pages)
3. print.css
<---- ie only css --- >
4. ie6.css
5. ie7.css
<--- >

1。Common.css（具有重置和通用布局、排版和表单样式）
2.pagespecific.css（主页和其他登录页的css）
3.打印样式
4.ie6.css
5.ie7.css

从CSS中去掉空白会使通过FTP进行编辑变得困难

这是一篇关于一个css或多个css的好文章

---

总会有权衡。如果您发现自己创建了许多CSS文件，并且存在太多的依赖项，因此很难跟踪要导入的CSS文件，那么最好创建一个（或最多两个）CSS文件并缩小它们。希望您的CSS文件不会太大。

这是一个非常好的视图，Jonathaxxx先生

是的，我同意你的看法，你提出的以上两点都是重点。关于你的第一点，我的一点意见是

你应该只关闭你需要的CSS页面 查看。（因为CSS规则太多了 降低渲染速度）

我认为我们也可以做到这一点

在web应用程序中，我们对应用程序的所有视图都有一个通用的框架。我们可以说它是母版页。我们所有不同的页面/视图都采用了它。因此，所有页面之间有一个共同的外观和感觉。在这种情况下，为什么我们不能只为它制作一个样式表呢。因此，它可以在所有页面/视图之间共享。这可以是布局文件

这是一个CSS文件

接下来，我们可以为页面中的控件生成另一个CSS，也可以在布局CSS文件中链接控件的样式

在不同页面可能获得的任何样式之后，我们可以为它们创建不同的文件。这不会增加单个页面的CSS文件数量。最多一个页面将获得2或3个完全相关的样式表

[编辑]

---

默认CSS文件将始终被缓存，并将在应用程序的所有页面/视图中使用。

就像始终一样，这两种情况都是有效的

您的解决方案必须与客户基准测试相结合

但我可能会尽可能长时间地只使用一个css文件。如果你的网站变得如此庞大，你需要两个不同的文件，试着在两个非常不同的网站部分使用它们，例如

site\u general

和

logged\u in

不过，有些事情可能会对您有所帮助：

• 使用压缩css（给我最好的结果）
• 让apache（或任何东西）保存你的css文件
• 最重要的是，确保用户缓存了文件

保持CSS干净

在一个站点上运行几次开发后，您可能会发现一件有用的事情是一个Firefox扩展，它为您的站点覆盖了未使用的选择器

使用选择器Wis

1. Common.css (with reset and common layout and typography and Form styling)
2. pagespecific.css (css of home and other landing pages)
3. print.css
<---- ie only css --- >
4. ie6.css
5. ie7.css
<--- >

LoadModule deflate_module modules/mod_deflate.so
<FilesMatch "\.(js|css|html|htm|php|xml)$">
    SetOutputFilter DEFLATE
</FilesMatch>

# Set up caching on media files for 1 month as recommended by page speed
<FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$">
    ExpiresDefault A2629744
    Header append Cache-Control "public, proxy-revalidate"
    Header append Vary "Accept-Encoding: *"
</FilesMatch>