希望简单的问题。
我们有一个超过3000行的样式表，因此在页面渲染时会出现明显的延迟。
以下是一个问题：是否更好的是有一个涵盖所有内容的大型样式表，或者覆盖页面不同部分的大量小样式表？ （例如一个用于布局，一个用于下拉菜单，一个用于颜色等？）
这只是为了表现，而不是'更容易'
答案 0 :(得分：16)
3,000行？您可能希望首先进入并查找冗余，不必要的详细选择器以及其他格式/内容问题。您可以选择创建文本样式表，颜色样式表和布局样式表，但这可能无法提高性能。这通常是为了给你更多的组织。一旦你收紧了规则，你也可以通过删除所有格式来缩小规则，这可能会减少一些，但可能不会太多。
答案 1 :(得分：13)
好吧，如果你将这3k行拆分成多个文件，整个渲染时间不会因为
而减少答案 2 :(得分：6)
根据this probably reliable source一个文件，满足规则1（最小化http请求）。并且不要忘记规则10，缩小js和css，尤其是3000线怪物。
答案 3 :(得分：5)
如果你因为额外的HTTP请求的开销和每个连接的新连接而将它们分开会更糟糕（我相信这是Apache的默认行为，以保持生命值关闭）< / p>
无论哪种方式，都需要在任何事情发生之前下载和解析。
答案 4 :(得分：3)
将该怪物文件分成较小的一次（布局，格式等）可以提高开发效率。在部署之前，您应该合并并缩小它们以避免多个http请求。为每个新部署提供一个新的数字（style-x.css）将允许您配置您的http服务器以设置远期到期的过期日期，并通过保存一些额外的http请求。
答案 5 :(得分：3)
听起来你以非常低效的方式使用CSS。我通常有一个400到700行的样式表，我设计的一些网站非常错综复杂。我认为你永远不需要1500多行。
3000行代码可以很好地维护。 我的建议是找到共享相同属性并将其作为子类别的内容。例如，如果您想在整个页面中使用一种字体，请在体内定义一次并忘记它。如果你需要多种字体或多种背景，你可以放一个div font1并用该div包装任何需要该字体样式的东西。
始终将CSS保存在一个文件中，除非每个页面上的样式完全不同。
答案 6 :(得分：2)
加载多个css文件的工作与解析的复杂性（以及速度）以及维护方面相悖
如果怪物文件的某些子集可以与某些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行中的大多数，那么请不要拆分。您可以考虑检查“过度编码”
祝你好运 拾音答案 7 :(得分：1)
划分CSS的唯一好处就是并行下载每个部分。如果您将每个CSS托管在不同的服务器上，它在某些情况下可能会获得一些速度。
但在大多数情况下，拥有单行3000行代码的CSS应该（有点）更快。
答案 8 :(得分：1)
查看Yahoo performance rules。它们得到了大量实证研究的支持。
规则＃1是最小化HTTP请求（不分割文件 - 您可以出于维护目的，但为了提高性能，您应该将它们作为构建过程的一部分重新连接在一起）。 ＃5是顶部的CSS引用（在＆lt; head＆gt;中）。您还可以使用YUI compressor通过剥离空格等来减小CSS的文件大小。
the rules中的更多内容（CDN，gzipping，缓存控制等）。
答案 9 :(得分：0)
我有一个站点css文件，用于控制整个站点的样式（主要是布局）。
然后我有更小的css文件用于页面特定的东西。
如果我打算在以后删除整个部分，我甚至有时会不止一个。
最好以20kb的速度下载和解析2个文件，而不是200kb的1个文件。
更新：此外，这不是一个有争议的问题吗？它只需要下载一次。如果暂停是一笔大交易，请设置一个像GMail一样的“加载”屏幕。
答案 10 :(得分：0)
3000线并不是什么大问题。如果将它们拆分为多个块，则仍需要下载以进行渲染。主要关注的是文件大小。我在一个主css文件中有超过11000行，大小约为150 kb。
我们对静态内容进行了解压缩，并且尺寸大幅减少到大约20 kb ..我们没有遇到任何性能问题。