Html 一个巨大的CSS-还是很多小的？

希望是一个简单的问题

我们有一个超过3000行的样式表，因此在呈现页面时会有明显的延迟

这里有一个问题：一个庞大的样式表覆盖所有内容，还是一大堆小样式表覆盖页面的不同部分更好？（例如一个用于布局，一个用于下拉菜单，一个用于颜色等？）

---

这只是为了性能，而不是真正的“哪种更简单”

3000行？您可能希望首先查看冗余、不必要的冗长选择器以及其他格式/内容问题。您可以选择创建文本样式表、颜色样式表和布局样式表，但这可能不会提高性能。这通常是为了给你更多的组织。一旦你收紧了规则，你还可以通过删除所有格式来缩小它，这可能会稍微减少一些，但可能不会太多。

好吧，如果你将这些3k行分割成多个文件，那么总体渲染时间不会减少，因为

所有3000行仍然需要解析

获取CSS文件需要多次请求，这会在另一个层面上降低整个问题的速度

---

根据一个文件，满足规则1（最小化http请求）。别忘了规则10，缩小js和css，尤其是3000行的怪物。

如果你把它们分开，情况会更糟，因为额外的HTTP请求和每个请求的新连接都会增加开销（我相信关闭keep alive是Apache的默认行为）

---

无论哪种方式，在任何事情发生之前都需要下载并解析所有内容。

分割CSS的唯一好处是并行下载每个部分。如果您将每个CSS托管在不同的服务器上，它在某些情况下可能会获得一些速度

---

但在大多数情况下，拥有一行3000行的CSS代码应该（稍微）快一些。

将怪物文件拆分成更小的一次（布局、格式等）将使开发更加高效。在部署之前，您应该合并并缩小它们，以避免多个http请求。为每个新部署为文件提供一个新的编号（style-x.css），这将允许您配置http服务器，将过期日期设置到遥远的将来，从而保存一些额外的http请求

我有一个站点css文件，用于控制整个站点的样式（主要是布局）

然后我有更小的css文件用于页面特定的东西

如果我打算以后翻出一整节的话，我甚至会有不止一节

下载和解析2个20kb的文件比下载和解析1个200kb的文件更好

---

更新：此外，这不是一个没有意义的观点吗？它只需要下载一次。如果暂停有那么大的意义，那就像GMail那样设置一个“加载”屏幕。

3000行不是什么大问题。如果将它们拆分为多个块，仍需要下载以进行渲染。主要关注的是文件大小。我有超过11000行在我们的主css文件之一，大小约为150 kb

---

我们压缩了静态内容，大小大大减小到20KB左右。。而且我们没有遇到任何性能问题。

听起来您使用CSS的方式非常低效。我通常有一个400到700行的样式表，我设计的一些站点非常复杂。我认为你永远不应该需要超过1500行

3000行代码要正确维护是远远不够的我的建议是找到具有相同属性的事物，并将它们分类。例如，如果您想在整个页面中使用一种字体，请在正文中定义一次，然后忘记它。如果您需要多个字体或多个背景，您可以放置一个div font1并用该div包装任何需要该字体样式的内容

---

始终将CSS保存在一个文件中，除非您在每个页面上有完全不同的样式。

加载多个CSS文件的努力与解析以及维护方面的复杂性（以及速度）背道而驰

如果monster文件的某些子集可以与某些html页面（并且只有那些特定页面）相关，那么将其分离为更小的单元是有意义的

例如：

您有一个家庭主页，您的all.css包含您自己的页面、您配偶的页面、您孩子的页面和您宠物的页面的所有格式，总共3000行

./my/*.html     call ./css/all.css
./spouse/*.html call ./css/all.css
./kid/*.html    call ./css/all.css
./pet/*.html    call ./css/all.css

在这种情况下，迁移到

./my/*.html     call ./css/my.css
./spouse/*.html call ./css/spouse.css
./kid/*.html    call ./css/kid.css
./pet/*.html    call ./css/pet.css

更好地维护，更容易地转移职责，更好地保护自己免受糟糕的代码处理程序的影响：-）

如果您的所有（或大部分）页面都非常复杂，它们绝对需要3000行中的大部分，那么不要拆分。您可以考虑检查“过编码”< /P> 祝你好运 MikeD

查看。它们得到了大量实证研究的支持

规则#1是最小化HTTP请求（不要分割文件——可以出于维护目的，但为了性能，应该在构建过程中将它们重新连接在一起）#5是将CSS引用放在顶部（在中）。您还可以使用来减少CSS的文件大小，方法是剥离空白等

---

更多内容（CDN、gzip、缓存控制等）。

您是否尝试压缩CSS文件？（）愚蠢的问题：但是你不能修剪CSS吗？最小化它的影响很小，但是我们会尽可能地去做。修剪它是我目前正在做的一件事，目的是尝试删除一些冗余，这也是问题的原因，即在执行此操作时，要知道应该朝哪个方向进行。如果担心的是下载时间，您可以gzip并发送它。。这无疑提高了性能拉链绝对是一条路要走。缩小将在一个3000行的文件上减少相当多的内容，但只要你gzip它，这种差异就很小了。换言之，minify+gzip永远不会更强大