Question

我正在使用ASP.NET MVC来开发一个站点。 CSS文件已增长到88KB，并且有5,000多行。我最近注意到最后添加的样式在浏览器中不存在。 CSS文件或行数是否有任何大小限制？

修改：对不起，我忘了提到在FireFox和IE8中Windows 7中都出现了这个问题。

Answer 1

Internet Explorer 据说每个文件的限制为4096个CSS 规则。 addRule函数的限制似乎也适用于通过样式表应用的规则：Reference

此外，它可以嵌入单个文档中的样式表数量限制。我认为是20岁。

Answer 2

我认为如果您的css文件大小有问题，那么现在是重新考虑您的样式策略的时候了。 CSS中的C代表级联。很常见的情况是，当CSS文件变得太大时，由于样式在适当的时候没有被重复使用，并且由于使用了级联行为。

我不是轻描淡写地说。我曾经在一些大型复杂的零售网站上工作，目前在非常复杂的金融交易应用程序上。每当我遇到超过几百种风格的网站时，我们通过降低css复杂性，在设计方面取得了很大的进步，降低了复杂性并提高了可维护性。

一个地方就是在 css reset 上进行Google搜索。有多种不同的实现，但它们通常遵循以下主题：覆盖每个浏览器的布局差异，并删除任意边框，边距和填充等。如果您愿意，请从干净的平板开始。然后你可以继续从那里建立你的风格，小心地充分利用级联和 css链

Chaining是元素上有多个类的地方。例如：

<div class="box right small"></div>

box可能有一些常规样式，您可能希望将其应用于许多块元素，例如div，h1 ... h6，p，ul，li，table，blockquote，pre，form。 small是自解释的right可能只是与右边对齐，但右边填充为4px。随你。关键是每个元素可以有多个类，并从可重用的构建块构建样式 - 单个样式设置的分组。否则称为类。

在一个非常简单的层面上，寻找合并样式的机会：

这样：

h1 {font-family: tahoma, color:#333333; font-size:1.4em;}  
h2 {font-family: tahoma, color:#333333; font-size:1.2em;}  
h3 {font-family: tahoma, color:#333333; font-size:1.0em;}

变为

h1, h2, h3 {font-family: tahoma, color: #333}  
h1 {font-size:1.4em;}  
h2 {font-size:1.2em;}  
h3 {font-size:1.0em;}

只是，稍微小一些，但这样做很多次，你可以有所作为。

此外，Validate your css。这有助于您发现代码中的错误。

Answer 3

CSS validator对您的CSS规则有什么看法？

剪切并粘贴样式表的最后一个“无效”规则：它们中的一些现在有效吗？

使用PSPad，Notepad ++，Scite等良好的文本编辑器可以看到明显的拼写错误：" ; /* */等等。它们的范围非常有限，例如;，或者很容易被看作是未关闭的评论。我遇到的不太明显的是没有关闭括号：

background: green url(img/dummy_gradient.png left top no-repeat;

没有什么工作到我的CSS规则中的下一个)以下50行！

Answer 4

你的问题是：

CSS文件或行数是否有任何大小限制？

对于IE9及更低版本，答案是是，具体取决于“行”和“大小限制”的含义。

大小：IE9及更低版本将读取的最大尺寸样式表为288kb。该标记后的任何样式都不会被阅读。 Read this article by Joshua Perina for a little more info on this。
我知道样式表中的行数没有最大值。选择器数量最多。 IE9和更低版本在每个样式表的4095个选择器上停止读取（甚至可能无法加载文件，该信息似乎在空中）。（参见下面的链接文章）
如果按“行”表示您可以为每个文件添加多行@import链接样式表，则可以导入31个最大样式表。每个样式表可以有31个最大@imported样式表。（参见下面的链接文章）
@import嵌套最多支持4个级别。

This article on MSDN talks a little more about the max selector and linked style sheets, and how they came to those numbers when developing IE.

Answer 5

没有限制。可能是文件被缓存，这是你没有看到修改的原因。尝试清除浏览器缓存或 Ctrl + F5 。

Answer 6

大多数普通浏览器没有限制（大多数答案都指出）。另一个非常重要的考虑如果你压缩你的响应，在Apache我会使用gzip或deflate，文件大小会大大减少。由于CSS非常重复，例如，在你的5000行中，你使用“color”一词800次，压缩只会向浏览器发送一个单词“color”，对压缩字典中的单词有799个引用。所以你的文件在磁盘上可能是88K，但在线上可能是9K。

FireFoxes Firebug等工具可用于查看压缩文件大小。我确信IE有一个http标头查看工具。

所以说实话，88K是磁盘上的文件大小，而如果使用压缩，则需要考虑响应中的文件大小。

Answer 7

如果您没有看到反映的文件底部的添加内容，请查看是否可以找到它中断的位置并查找愚蠢的错误和错误。 CSS将会非常默默地失败，但仍然可以很愉快地工作直到它。

这可能是你担心的原因。

Answer 8

在某些浏览器中可能存在（我没有听说过，但它有可能），但对于CSS文件来说88 KB绝对没问题。

Answer 9

理论上，没有限制。

实际上，大多数普通浏览器（FF，Chrome，Opera，Safari）都可以处理你扔的任何东西。然而，一些较旧的和/或移动浏览器（Access NetFront，一个 - 与许多移动电话捆绑在一起）遇到大页面（大约100KB及以上）的问题并抛出各种错误。

TL; DR：不，除非你试图支持各种奇怪的浏览器。

Answer 10

浏览器可以处理当然有限制，但它肯定超过88千字节或5000行。一个有根据的猜测就像一个兆字节或65535行...你可能会在达到极限之前遇到性能问题。

您看不到更改的原因可能是缓存。您可以使用 Ctrl + F5 在您自己的浏览器中清除页面的缓存（如Darin所述。）

我们在发布新版本时重命名CSS文件，以确保所有访问者都获得最新版本。

Answer 11

你验证了你的CSS吗？有些浏览器会包含样式，直到语法错误（或某些语法错误）为止，然后有效地截断文件，导致这种行为。

我也投票支持重构你的CSS，你可能会少一些。。

css文件大小有限制吗？

11 个答案: