is there any limit on css file size?

Question

I am using ASP.NET MVC to develop a site. The CSS file has grown to 88KB and is having a little more 5,000 lines. I noticed recently that styles added at the end are not the

Answer 1

What does the CSS validator say about your CSS rules?

Cut and paste the last "ineffective" rules of your stylesheet at its beginning: are some of them now working?

Obvious typo errors can be seen with a good text editor like PSPad, Notepad++, Scite: " ; /* */ and so on. They have a pretty limited scope like ; or are easily seen like a comment not closed. The less obvious one I encountered was not closing a parenthesis:

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

Nothing worked till the next ) in my CSS rules 50 lines below!

Answer 2

Internet Explorer has is said to have a limit of 4096 CSS rules per file. There's a limit on the addRule function that seems to apply to rules applied through a style sheet as well: Reference

Also, it has a limit on the number of style sheets you can embed in a single document. I think it is 20.

Answer 3

There is no limit for most normal browsers (as pointed out in most answers). Another very important consideration. If you compress your responses, in Apache I would use gzip or deflate, the file size is reduced dramatically. Since CSS is very repetitive, and for example, in your 5000 lines you use the word "color" 800 times, the compression will only send one instance of the word "color" to the browser with 799 references to the word in the compressed dictionary. So your file may be 88K on disk, but 9K over the wire.

Tools like FireFoxes Firebug are useful to see the compressed file size. I am sure IE has a http header viewing tool.

So to make my point, the 88K is the file size on disk, while, if using compression, you need to consider the file size in the response.

Answer 4

If you're not seeing additions to the bottom of the file reflected, see if you can spot where it breaks and look for stupid errors and mistakes. CSS will fail quite silently, but will still happily work up until it does.

This could be the cause of your worries.

Answer 5

No there isn't a limit. Probably the file is being cached and that's reason you are not seeing modifications. Try clearing the browser cache or Ctrl+F5.

Answer 6

There is of course a limit for what browsers can handle, but it's certainly a lot more than 88 kilobyte or 5000 lines. An educated guess would be something like a megabyte or 65535 lines... You are likely to run into performance problems long before you reach the limit.

The reason that you don't see changes appear is probably caching. You can use Ctrl+F5 to clear the cache for the page in your own browser (as Darin mentioned.)

We rename the CSS file when we publish a new version of it, to be sure that all visitors gets the latest version.